一、两种方式:
1、后台提供一个 URL,然后用 window.open(URL) 下载
2、后台直接返回文件的二进制内容,然后前端转化一下再下载
二、Blob对象:
1、Blob,全称:Binary Large Object,表示不可变的类似文件对象的二进制数据。
2、构造函数:Blob(blobParts[, options])
参数说明:
常用写法:var blob = new Blob([res], { type: res.type });
解释:res 为请求响应结果,使用 type 指定MIME类型(否则为"")
3、使用场景:
三、根据前端返回的二进制文件流下载文件:
示例代码:当文件状态改变时触发上传批量导入文件,批量导入完成后会返回一个反馈文件的二进制流,我们需要将该二进制流下载为文件。
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节点--超链接,为节点绑定一个点击事件。