一、两种方式:
1、后台提供一个 URL,然后用 window.open(URL) 下载
2、后台直接返回文件的二进制内容,然后前端转化一下再下载
二、Blob对象:
1、Blob,全称:Binary Large Object,表示不可变的类似文件对象的二进制数据。
2、构造函数:Blob(blobParts[, options])
参数说明:
- blobParts:数组类型, 数组中的每一项连接起来构成Blob对象的数据,数组中的每项元素可以是ArrayBuffer(二进制数据缓冲区), ArrayBufferView,Blob,DOMString。或其他类似对象的混合体。
- options:可选项,字典格式类型,可以指定如下两个属性:
- type,默认值为"",它代表了将会被放入到blob中的数组内容的MIME类型。
- endings, 默认值为"transparent",用于指定包含行结束符\n的字符串如何被写入。它是以下两个值中的一个: "native",表示行结束符会被更改为适合宿主操作系统文件系统的换行符; "transparent",表示会保持blob中保存的结束符不变。
常用写法:var blob = new Blob([res], { type: res.type });
解释:res 为请求响应结果,使用 type 指定MIME类型(否则为"")
3、使用场景:
- 分片上传
- Blob URL:Blob URL是blob协议得URL,它的格式如 blob:http://xxx。它可以通过window.URL.createObjectURL(blob)创建。在绝大部分场景下,我们可以像使用Http协议得URL一样使用Blob URL。常见得场景有作为文件得下载地址和作为图片资源地址。
三、根据前端返回的二进制文件流下载文件:
示例代码:当文件状态改变时触发上传批量导入文件,批量导入完成后会返回一个反馈文件的二进制流,我们需要将该二进制流下载为文件。
fileChange(file) {
const formData = new FormData();
this.$confirm('是否上传此文件?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
formData.append('file', file.raw)
iccard.batchImport(formData).then((res) => {
const blob = new Blob([res], { type: res.type });
let dom = document.createElement("a");
let url = window.URL.createObjectURL(blob);
dom.href = url;
dom.download = decodeURI('批量导入结果反馈.xlsx');
dom.style.display = "none";
document.body.appendChild(dom);
dom.click();
dom.parentNode.removeChild(dom);
window.URL.revokeObjectURL(url);
});
this.$message({
type: 'success',
message: '上传成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '取消上传'
});
});
},
总结:大体思路就是获取到文件url,然后通过创建document节点--超链接,为节点绑定一个点击事件。