借助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触发的浏览器文件下载

原文地址:https://www.cnblogs.com/remember-forget/p/7762208.html