首先下載需要用到的插件 js-file-download
npm install js-file-download --save
在導(dǎo)出的組件引入fileDownload
import fileDownload from 'js-file-download'
使用
orderExport(){
var self = this;
/*responseType: 'arraybuffer' 設(shè)置該值能夠改變響應(yīng)類型 ArrayBuffer對象*/
this.$axios.post('/export',{id},{ responseType: 'arraybuffer'}).then(result => {
//實際調(diào)用
var head = result.headers['content-type'];
/*這里如果導(dǎo)出報錯后臺返回錯誤信息為json格式岔擂，判斷headers為application/json時彈出錯誤信息*/
if(head && head.toLowerCase().indexOf('application/json') != -1){
/*ab2str() 該方法是ArrayBuffer轉(zhuǎn)字符串，該方法文章下方有貼出。*/
/*由于我們responseType指定相應(yīng)類型為ArrayBuffer對象,所以我們需要進(jìn)行轉(zhuǎn)換后再彈出提示*/
self.ab2str(result.data,function(str){
var json = JSON.parse(str)
self.$message.warning({
showClose: true,
message: result.msg
});
});
}else{
/*從后臺響應(yīng)headers中取出文件名fileName*/
let fileName = result.headers['content-disposition'].split('=')[1];
/*fileDownload方法第一個參數(shù)為后臺響應(yīng)Buffer流咬荷，第二個參數(shù)為下載文件名*/
fileDownload(result.data,decodeURI(fileName));
}
})
},
ArrayBuffer轉(zhuǎn)字符串
ab2str(u,f) {
var b = new Blob([u]);
var r = new FileReader();
r.readAsText(b, 'utf-8');
r.onload = function (){if(f)f.call(null,r.result)}
},
