浏览器端创建可下载文件

最近碰到一需求，前端通过拖拽生成一份内容数据，希望保存并可以下载文件。

实现下载的函数

function download(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() 方法来释放。浏览器会在文档退出的时候自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。