小tip:JS前端创建html或json文件并浏览器导出下载

一、HTML与文件下载

如果希望在前端侧直接触发某些资源的下载,最方便快捷的方法就是使用HTML5原生的download属性,例如:

<a href="large.jpg" download>下载</a>

具体介绍可参考我之前的文章:“了解HTML/HTML5中的download属性”。

但显然,如果纯粹利用HTML属性来实现文件的下载(而不是浏览器打开或浏览),对于动态内容,就无能为力。

例如,我们对页面进行分享的时候,希望分享图片是页面内容的实时截图,此时,这个图片就是动态的,纯HTML显然是无法满足我们的需求的,借助JS和其它一些HTML5特性,例如,将页面元素转换到canvas上,然后再转成图片进行下载。

但本文要介绍的下载不是图片的下载,而是文本信息的下载,所需要使用的HTML特性不是canvas,而是其它。

二、借助HTML5 Blob实现文本信息文件下载

如果对Blob不了解,可以先看看我好些年之前写的“理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型”一文。

原理其实很简单,我们可以将文本或者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实现的html格式文件下载demo

点击“下载”按钮,会把文本域中的内容全部作为一个.html后缀文件下载下来,各流程效果如下面几张图:

下载按钮点击示意

出现下载确认框(根据浏览器的设置不同也可能直接下载),然后名称默认就是test.html

默认就是test.html名称

然后对应保存目录就多了个类似下图的文件:

保存好的test.html文件截图示意

双击该test.html文件可以在浏览器中正常浏览,说明,保存信息无误。

test.html在浏览器中访问的效果

触发下载的JS代码就几行:

button.addEventListener('click', function () {
    funDownload(textarea.value, 'test.html');	
});

以上~

三、结束语

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

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

download属性从Edge13开始支持,理论上,edge也应该支持直接JS触发的浏览器文件下载,但我手头上并无相关浏览器,无法确定真实情况如何,欢迎有条件的小伙伴帮忙测下告知结果。

就这些吧,感谢阅读!

(本篇完)

分享到:

标签: , , ,

赞助商推荐(我也要赞助)

想学到点真东西? ×
如果你有1~3年前端开发经验,不妨 ×


发表评论(目前14 条评论)

  1. 善良的小伟说道:

    您好。请问如果我需要下载的是js文件怎么办呢?该js文件内容只是简单的对象嵌套。我尝试改变MIME类型,但发现出来的还是[Object Object]。用JSON转成字符串是可以实现的,但我希望原文下载。需要怎么做呢?

  2. boss说道:

    大神,我就想问问,浏览器能做到分片下载大文件?能实现串行下载,一个文件下载完下载另一个文件?

  3. 妖妖说道:

    太短了

  4. 小妖说道:

    请问一下。IE 有其他方式可以代替实现吗?

  5. 南华华说道:

    这个事儿我没记错的话FileSaver.js就是这么实现的

  6. 胡衍生说道:

    如果是比较大的文件,如视频、音频文件就没法做了吧?

  7. 顶点小说说道:

    可不可以把数据库的内容,导成excel格式的

  8. nicholasurey说道:

    生成了一个叫“A1DEA3AF-8977-4064-A5D8-5B17DC9E44EB”的无后缀文件

  9. Hazel说道:

    张大哥你好,入坑前端以来就一直关注你的博客,平时遇到CSS方面的难题第一个想到的就是打开你的博客看看有没有类似研究,不得不说这方面你已经走在了非常前沿,钻研得很透彻。

    最近我遇到一个关于position:fixed 的有趣现象,这里想和你讨教一下。我查阅了国内外能触及到的资料,其定义解释都是,这个属性是元素相对于viewport进行绝对定位。

    但是!有趣的是,当我把left的值设置为auto或删掉left属性时,奇迹发生了!该元素竟然位于父元素的最边缘!此处left作为举例,经尝试,right也是同样的效果。
    废话不多说,请看代码
    链接在此
    https://codepen.io/HazelZ/pen/GEGOqv

    不知该如何解释这一现象,还请大哥指正

  10. arrow说道:

    edge
    下载完就生成一个文件,类似GUID命名的
    加个后缀就正常了

  11. Margox说道:

    旭哥,想知道HTML转canvas,有哪些实现方法呢?我目前只知道一个借助svg的foreignObject来实现的办法