最近遇到一个需求,需要将页面中的配置信息下载下来供用户方便使用,以前这个场景的需求有时候会放到后端处理,然后给返回一个下载链接。其实并不需要这么麻烦,这样既增大了服务器的负载,也让用户产生了没有必要的网络请求,现在前端也是可以直接通过
Blob
对象进行前端文件下载了,下面简单记录下相关实现
Blob
对象表示一个不可变、原始数据的类文件对象。Blob
表示的不一定是JavaScript
原生格式的数据。File
接口基于Blob
,继承了 Blob
的功能并将其扩展使其支持用户系统上的文件。
const aBlob = new Blob( array, options );
参数说明
const debug = {hello: "world"};
const blob = new Blob([JSON.stringify(debug, null, 2)],{type : 'application/json'});
URL.createObjectURL()
静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的 URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的 URL 对象表示指定的 File 对象或 Blob 对象。相当于这个方法创建了一个传入对象的内存引用地址
objectURL = URL.createObjectURL(object);
参数说明
返回值
DOMString
URL.revokeObjectURL()
静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL()
创建的 URL
对象。当你结束使用某个 URL
对象之后,应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。
你可以在 sourceopen
被处理之后的任何时候调用 revokeObjectURL()
。这是因为 createObjectURL()
仅仅意味着将一个媒体元素的 src
属性关联到一个 MediaSource
对象上去。调用revokeObjectURL()
使这个潜在的对象回到原来的地方,允许平台在合适的时机进行垃圾收集。
window.URL.revokeObjectURL(objectURL);
参数说明
URL.createObjectURL()
方法产生的 URL 对象。内存管理
在每次调用createObjectURL()
方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时,每个对象必须通过调用 URL.revokeObjectURL()
方法来释放。浏览器会在文档退出的时候自动释放它们,但是为了获得最佳性能和内存使用状况,你应该在安全的时机主动释放掉它们。
比如在某后台管理中希望将用户的几个配置信息导入到一个
json
文件当中供用户下载下来
代码实现如下:
const config = {
name: 'lsqy',
password: 'yourpassword',
ak: 'XXXXXXXXXX',
sk: 'XXXXXXXXXX'
}
const blobContent = new Blob(
[JSON.stringify(config, null, 2)],
{type : 'application/json'}
);
const blobUrl = window.URL.createObjectURL(blobContent)
downloadFileByBlob(blobUrl, 'config.json')
function downloadFileByBlob(blobUrl, filename) {
const eleLink = document.createElement('a')
eleLink.download = filename
eleLink.style.display = 'none'
eleLink.href = blobUrl
// 触发点击
document.body.appendChild(eleLink)
eleLink.click()
// 然后移除
document.body.removeChild(eleLink)
}
执行上面的代码,我们可以得到一个config.json
的文件,可以看到,其实很简单就实现了这个场景需求,当然这里是下载的json
文件,下载其他的文件也是一样的道理,只是需要得到相应文件的blob
数据,再结合相应的MIME类型即可;
兼容性方面目前主流浏览器都已支持,ie10 以及以上也支持。
另外Blob
结合URL.createObjectURL()
与URL.revokeObjectURL()
还可以用在预览图片、预览 PDF、视频链接防盗等多种场景中,大家可以发挥自己的想象力来进行实现
文章首发自个人博客
1
newbieRenew 2019-12-19 12:09:26 +08:00 via iPhone
之前也做过一样的,下载 json。a 连接并不需要 append 到 dom 里,直接调用 click()就行了
|
2
bshu 2019-12-19 12:45:45 +08:00 via Android
FileSaver.js ,可直接用的轮子。另外送你给大坑,国产手机浏览器都无法下载。
|