zoukankan      html  css  js  c++  java
  • 借助HTML5 Blob实现文本信息文件下载

    原理其实很简单,我们可以将文本或者JS字符串信息借助Blob转换成二进制,然后,作为<a>元素的href属性,配合download属性,实现下载。

    代码也比较简单,如下示意(兼容Chrome和Firefox):

    var funDownload = function (content, filename) {
        // 创建隐藏的可下载链接
        var eleLink = document.createElement('a');
        eleLink.download = filename;
        eleLink.style.display = 'none';
        // 字符内容转变成blob地址
        var blob = new Blob([content]);
        eleLink.href = URL.createObjectURL(blob);
        // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
    };
    

      其中,content指需要下载的文本或字符串内容,filename指下载到系统中的文件名称。

    funDownload(textarea.value, 'test.html');	

    不止是.html文件,.txt.json等只要内容是文本的文件,都是可以利用这种小技巧实现下载的。

    在Chrome浏览器下,模拟点击创建的<a>元素即使不append到页面中,也是可以触发下载的,但是在Firefox浏览器中却不行,因此,上面的funDownload()方法有一个appendChildremoveChild的处理,就是为了兼容Firefox浏览器。

    download属性从Edge13开始支持,理论上,edge也应该支持直接JS触发的浏览器文件下载

  • 相关阅读:
    centos7安装zabbix4.2
    python3.x 基础三:文件IO
    python3.x 基础三:字符集问题
    python3.x 基础三:set集合
    python3.x 基础二:内置函数
    python3.x 基础一:dict字典
    python3.x 基础一:str字符串方法
    python3.x 基础一
    [leetcode]Path Sum
    [leetcode]Balanced Binary Tree
  • 原文地址:https://www.cnblogs.com/remember-forget/p/7762208.html
Copyright © 2011-2022 走看看