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"
})
}