首先在utils.js里面声明exportMethod函数，该函数的作用是通过发axios post请求后端导出接口，请求成功后：
1. 在成功函数里面先新建一个a标签：
const link = document.createElement('a');
2. 然后new一个Blob对象（是一个可以存储二进制文件的容器)
let blob = new Blob([res.data], {type: 'application/x-excel'});
let blob = new Blob(arr[optional], options[optional])
第一个参数为一个数据序列，可以是任意格式的值
第二个参数用于指定将要放入Blob中的数据的类型，比如：type: 'application/x-excel' 或 type: 'text/plain'
3. 通过URL.createObjectURL()方法通过传入的参数(参数：用于创建url的file对象，Blob对象或者MediaSource对象)，创建一个指向该参数对象的URL，绑定到创建a标签的href属性上，
link.style.display = 'none';
link.href = URL.createObjectURL(blob);
link.download = data.fileName;
4. 然后往body上面append这个a标签，并执行a标签的点击事件，进行文件的导出，最后导出成功后，要记得把a标签从body上面移除。
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
整个的实现代码如下：
utils.js中添加exportMethod函数：
请求方式为post
exportMethod(data) {
axios({
method: data.method,
url: data.url,
data: data.params,
responseType: 'blob'
}).then((res) => {
const link = document.createElement('a');
let blob = new Blob([res.data], {type: 'application/x-excel'});
link.style.display = 'none';
link.href = URL.createObjectURL(blob);
link.download = data.fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}).catch(error => {
this.$Notice.error({
title: '错误',
desc: '网络连接错误'
});
});
}
在调用的组件中引入utils.js文件：
import utils from 'utils/utils.js';
<div class="statement-detail-exportbtn">
<button class="veui-button"
@click="exportExcel">
<span>导出</span>
</button>
</div>
exportExcel() {
let data = {
method: 'post',
url: this.exportUrl,
fileName: this.id+' 结算单详情.xlsx',
params: {
settlementId: this.id
}
};
utils.exportMethod(data);
}
请求方式为get
在utils中新建一个导出excel文件
import axios from 'axios' // 导出Excel公用方法
export function exportMethod(data) {
axios({
method: data.method,
url: `${data.url}${data.params ? '?' + data.params : ''}`,
responseType: 'blob'
}).then((res) => {
const link = document.createElement('a')
let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
link.style.display = 'none'
link.href = URL.createObjectURL(blob) // link.download = res.headers['content-disposition'] //下载后文件名
link.download = data.fileName //下载的文件名
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}).catch(error => {
this.$Notice.error({
title: '错误',
desc: '网络连接错误'
})
console.log(error)
})
}
在调用的组件中引入utils.js文件：
exportDepReceRank() {
let myObj = {
method: 'get',
url: "http://zhlw.dev.internal.virtueit.net/v1/video/image/exportImgCheckResult",
fileName: '图片质量检测结果',
params: `orgId=2`
}
exportMethod(myObj)
}
