微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

浏览器端创建可下载文件

2017-11-23 21:00 前端大全

(点击上方蓝字,快速关注我们)


作者:ymfe - 李欣悦

https://blog.ymfe.org/浏览器端创建可下载文件/

如有好文章投稿,请点击 → 这里了解详情


前一段时间碰到一需求,前端对从后端获取数据进行纯前端筛选过滤操作后,希望保存下文件,由于内容格式相对简单,经调研采用 Blob URL方式实现。


浏览器兼容性



实现下载的函数


function loadFile(fileName, content){

    var aLink = document.createElement('a');

    var blob = new Blob([content], {

      type: 'text/plain'

    });

    var evt = new Event('click');

    aLink.download = fileName;

    aLink.href = URL.createObjectURL(blob);

    aLink.click();

    URL.revokeObjectURL(blob);

}


描述下代码内容:


  • 创建 a 标签

  • 使用 Blob 构造函数将文件内容编译为指定格式的二进制

  • 设置 download 属性设置文件名称

  • Blob 对象作为 Url 也赋给 a 标签,

  • 触发标签click

  • 回收内存


关于Blob


Blob 对象是一个字节序列。拥有 size 和 type 等属性。初始化 Blob 接受的内容类型。


  • ArrayBuffer [TypedArrays] elements.

  • ArrayBufferView [TypedArrays] elements.

  • Blob elements.

  • DOMString [WebIDL] elements.


URL.createObjectURL & URL.revokeObjectURL()


URL.createObjectURL() 静态方法会创建一个 DOMString,它的 URL 表示参数中的对象。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示着指定的 File 对象或者 Blob 对象。


DOMString:

一个UTF-16字符串,JavaScript 正是使用了这种编码的字符串,所以 DOMString 直接被映射为(is mapped directly to)


在每次调用 createObjectURL() 方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时,每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。浏览器会在文档退出的时候自动释放它们,但是为了获得最佳性能和内存使用状况,你应该在安全的时机主动释放掉它们。


关于事件


createEvent 的事件必须要使用 initEvent,但是这种方式已经不被推荐。



觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

 
前端大全 更多文章 JavaScript 中常见排序算法详解 谷歌浏览器 VS 火狐量子:哪一个更快呢? 15 个有趣的 JS 和 CSS 库 没有存在感的阿里工程师 Webpack HMR 原理解析
猜您喜欢 直播“CoSoLoMo”战略是地方电视台重大历史机遇 阿里ASRC广州站雷峰安全沙龙八卦 饿了么小程序的一些思考 滴滴的小伙伴们注意! 推荐大家使用的CSS书写规范、顺序