使用场景: 在导出文件或下载文件的时候,有时候会返回blob文件流的数据,而不是返回URL地址,对于这种场景,下面谈谈其应用。
1. 简析window.URL.createObjectURL方法:
创建一个新的对象URL,该对象URL可以代表某一个指定的file对象或者bold对象。
用途: 可以用于在浏览器上预览本地的图片或者视频。
URL对象是硬盘(SD卡等)指向的一个文件路径,如果我们做文件上传的时候,想在没有上传服务器端的情况下看到上传图片的效果图的时候,就可以通过var url = window.URL.createObjectURL(files[0]);获得一个http格式的url路径,这个时候就可以设置img中的src进行显示了。
2. 关于blob的一点说明
new Blob 就是Blob对象是二进制数据,但它是类似文件对象的二进制数据,因此可以像操作File对象一样操作Blob对象,实际上,File继承自Blob。
3. 封装一个通用的导出或下载方法
<script>
function funcDownload (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);
}
function dn (){
var ss = document.querySelector('html').outerHTML;
funcDownload(ss, 'ceshi.html')
}
</script>
注:在Chrome浏览器下,模拟点击创建的<a>
元素即使不append
到页面中,也是可以触发下载的,但是在Firefox浏览器中却不行,因此,上面的funDownload()
方法有一个appendChild
和removeChild
的处理,就是为了兼容Firefox浏览器。
参数:File对象或者Blob对象。这里大概说下File对象和Blob对象:
File对象:就是一个文件,比如我用input type="file"标签来上传文件,那么里面的每个文件都是一个File对象。
Blob对象:就是二进制数据,比如通过new Blob()创建的对象就是Blob对象,又比如在XMLHttpRequest里,如果指定responseType为blob,那么得到的返回值也是一个blob对象。
注意点:每次调用createObjectURL的时候,一个新的URL对象就被创建了。即使你已经为同一个文件创建过一个URL.;如果你不再需要这个对象,要释放它,需要使用URL.revokeObjectURL()方法.,当页面被关闭,浏览器会自动释放它,但是为了最佳性能和内存使用,当确保不再用得到它的时候就应该释放它。
总结:vue中下载方法:
const downloadZip = async (row) => {
const res = await download({
exportId: row.exportId,
});
const url = window.URL.createObjectURL(
new Blob([res as any], { type: "application/zip" })
);
const link = document.createElement("a");
link.href = url;
//指定下载的文件名
link.download = row.versionNumber ? row.versionNumber : "内容交付";
link.click();
};
原理其实很简单,我们可以将文本或者JS字符串信息借助Blob转换成二进制,然后,作为<a>
元素的href
属性,配合download
属性,实现下载。