Blob下载
.post('xxxxx接口地址')
.send(obj)//需要的参数
.responseType('blob');//重点!!!!!处理文件流
前端页面处理
.then((res) => {
const blob = res.body;//接口返回的文件流
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = (e) => {
const a = document.createElement('a');
a.download = `文件名称.xls`;//看需求是下载什么文件可以改后缀
// 后端设置的文件名称在res.headers的 "content-disposition": "form-data;
//name=\"attachment\"; filename=\"20181211191944.zip\"",
a.href = e.target.result;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};
});
二进制arraybuffer下载
// 请求接口是注意要添加接收形式
.post('xxxxx接口地址')
.send(obj)//需要的参数
responseType: 'blob', // 注意!
const blob = new Blob([res.data]) //res.data 接口返回的arraybuffer的位置;arrayBuffer流转成blob
var a = document.createElement('a')
var href = window.URL.createObjectURL(blob) // 创建下载的链接
a.href = href
// 注意:下载文件名必须要有 或者自定义或者直接取接口中带回的
a.download = 'export.xls' // 自定义下载后文件名
// 或者取后端返回的文件名
//a.setAttribute('download', res.headers['content-disposition'].split('filename=')[1])
document.body.appendChild(a)
a.click() // 点击下载
document.body.removeChild(a) // 下载完成移除元素
window.URL.revokeObjectURL(href) // 释放掉blob对象
接口返回下载地址,前端实现下载
if (res.code === 1) {
const link = document.createElement('a')
//_blank表示在新窗口打开链接
link.target = '_blank'
link.href = res.data.url //接口中下载链接
// link.setAttribute('download', '文件名字' + Date.now() + '.xls') // 下载文件的名称及文件类型后缀
document.body.appendChild(link)
link.click()
document.body.removeChild(link) // 下载完成移除元素
}
下载文件的方法还有其他的可参考同类博客:下载文件_Sunny_lxm的博客-CSDN博客
下载文件失败时,接口返回json格式,前端判断格式如果是json格式时前端接口弹出错误提示
const _this = this
.then((res) => {
// 文件下载失败时接口返回json格式,弹出报错提示
if (res.type === 'application/json') {
const reader = new FileReader()
reader.onload = function () {
const message = JSON.parse(reader.result).msg // msg:接口返回错误信息的key值
_this.$message.error(message) // 将错误信息显示出来
// ... 执行其他自定义逻辑代码
}
reader.readAsText(res)
return
}
const blob = res.body;//接口返回的文件流
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = (e) => {
const a = document.createElement('a');
a.download = `文件名称.xls`;//看需求是下载什么文件可以改后缀
// 后端设置的文件名称在res.headers的 "content-disposition": "form-data;
//name=\"attachment\"; filename=\"20181211191944.zip\"",
a.href = e.target.result;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};
});
前端返回的文件流pdf在浏览器新标签页打开
api(params).then((res) => {
const blob = new Blob([res])
const blobUrl = URL.createObjectURL(blob)
const reader = new FileReader()
reader.onload = function() {
const pdfData = reader.result
// 创建新的 Blob 对象
const pdfBlob = new Blob([pdfData], { type: 'application/pdf' })
const pdfUrl = URL.createObjectURL(pdfBlob)
const a = document.createElement('a')
a.href = pdfUrl
a.target = '_blank'
a.click()
URL.revokeObjectURL(pdfUrl) // 释放URL对象
}
reader.readAsArrayBuffer(blob)
}).catch((err) => {
console.error(err)
})