首先在main.js/ts中引入axios
import axios from 'axios';
Vue.prototype.$axios= axios;
功能实现:
let formData = new FormData()
formData.set('xx', 'xx') // 下发参数 这里传参具体看后端要求
this.$axios({
method: 'post',
url: '后端url路径',
{responseType: 'blob'} // 请求流类型
}).then(res => {
if (res.data.size > 0) {
let blob = new Blob([res.data], { type: res.headers['content-type']}) // 构建bolb 根据后端返回类型构建流
let url = window.URL.createObjectURL(blob); // 构建流地址
let link = document.createElement('a'); // 构建下载元素
let fileName = decodeURIComponent(res.headers['content-disposition'].match(/filename=(.*)/)[1]); // 提取文件名
link.href = url; // 下载元素url赋值
link.download = fileName; // 下载后文件名
document.body.appendChild(link); // 浏览器增加元素
link.click(); // 点击下载
link.remove(); // 下载完成移除元素
window.URL.revokeObjectURL(link.href); // 用完之后使用URL.revokeObjectURL()释放;
} else {
this.message.error('下载文件失败 !')
}
}).catch(err => {
this.message.error(err.msg)
})
版权声明:本文为zhlCool原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。