VUE接收Excel文件流并下载 file-download
2021-08-20 本文已影响0人
小李不小
VUE接收文件流并转换成Excel表格下载到本地,
鄙人一直写的是Java,偶尔也写写VUE,像这样导出或者下载的功能经常要用到,分享给大家,希望在工作中能帮到大家。。。
一:安装vue自带的插件
npm install --save js-file-download
二:引入js-file-download
import fileDownload from 'js-file-download';
三:声明一个button
<el-form-item>
<el-button type="primary" size="mini" @click="exportExcel">导出</el-button>
</el-form-item>
四,定义exportExcel事件
exportExcel(){
let data = {//请求参数
page: this.currentPage,
pageSize: this.pageSize,
param: this.searchData,
};
this.$confirm('确定导出?','操作提示',{
confirmButtonText:'确定',
cancelButtonText:'取消',
type:'warning',
center:true
}).then(()=>{
exportExcel(data,{ responseType: "blob" }).then( (res) => { //$api.exporPersontExcel或者api文件的接口
let date= this.getDate();
//fileDownload("blob字节流",“fileName”)
fileDownload(res.data, "主产品提货单.xlsx");
this.$message({
message: '成功!',
type: 'success'
});
})
}).catch( err => {
this.$message({
type: 'error',
message: '取消!'
});
})
},
注意:请求的URL加参数'responseType':"arraybuffer"
export const exportExcel = (data) => {
return axios({
url: `${prefix}sales/billMain/exportExcel`,
method: 'post',
data,
'responseType':"arraybuffer"
})
}