借助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()方法有一个appendChild和removeChild的处理，就是为了兼容Firefox浏览器。

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