web前端下载文件,接收后端返回的二进制流并下载
一般情况下,前端下载文件,后端会返回二进制流文件给我们
HTML代码:给按钮绑定点击事件
<el-form-item label="下载附件">
<el-button @click="downBtn" type="primary">下载</el-button>
</el-form-item>
后端接口文档
请求方式:get
接口地址:/download
请求参数:path: ‘xxx.jpg’
Js代码
downBtn(){
axios({
//此处对应填写后端规定的分请求方式get
method: 'GET',
//此处填写后端规定的接口地址
url: '/download’,
params: {
//此处填写后端规定的请求参数
path: 'xxx.jpg'
},
//此处规定请求成功返回的是流形式文件
responseType: 'blob'
}).then(res => {
if(res.data.response_code == 500){
//后端返回值为500,请求失败,提醒用户
//res.data.response_message为后端返回的失败信息
alert("res.data.response_message")
}else{
//请求成功,返回的数据
const blob = new Blob([res.data], { type: res.data.type })
//判断返回的文件是否为空文件
if(blob.size!=0){
//生成一个a连接
let tag = document.createElement( "a" );
//将返回的数据生成url赋值给a链接
tag.href = URL.createObjectURL( blob );
//此处规定要下载的文件名称,带文件后缀,要不然可能下载出错
tag.download = 'xxx.jpg';
//模拟按钮点击下载
tag.click();
//下载后释放url对象
URL.revokeObjectURL( tag.href );
}else{
alert("未请求到数据,请联系管理员!")
}
}
})
.catch((rej) => {
console.log(rej)
});
},
此方法也可以下载其他类型的文件
如有写的不清楚的可评论私信联系我,欢迎指教