今日碰到需求,前端对从后端获取数据进行纯前端筛选过滤操作后,希望保存下文件,由于内容格式相对简单,经调研采用 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
,但是这种方式已经不被推荐。
参考文章