直接调用接口是返回表格流文件格式的,可以使用 Blob 对象指定要读取的文件或数据,然后创建a标签下载。
<div class="btn">
<el-button icon="el-icon-download" type="primary" @click="download()">
下载服务单
</el-button>
</div>
// 下载
download() {
this.$axios
.post('/api/deve/deve/print?id=' + this.proId, {
responseType: 'blob' // 重点在于配置responseType: 'blob'
}).then(res => {
console.log(res)
const link = document.createElement('a'); // 创建元素
let blob = new Blob([res.data], {
type: 'word'
});
link.style.display = 'none';
link.href = URL.createObjectURL(blob); // 创建下载的链接
//num++
link.setAttribute('download', this.title+'-服务单.doc'); // 给下载后的文件命名
document.body.appendChild(link);
link.click(); // 点击下载
document.body.removeChild(link); // 下载完成移除元素
window.URL.revokeObjectURL(link.href); // 释放掉blob对象
})
.catch(_ => {});
}