Vue2 導出Excel + 解決亂碼問題 —— axios

請求用的axios（類似ajax問題），找了很多方法，都下載不了文件。

 

以下是解決方法）：

1.接口返回的流：

 

2、請求頭和返回頭：

 

 

方法一、方法二：

2.下載流文件的代碼

 

方法一：是用了插件 https://github.com/kennethjiang/js-file-download

方法二：是用了 blob

不管哪種方法，記得設置  responseType  ！！！！！

 

附上代碼：

1.  
   // 導出Excel
2.  
   exportBill: function () {
3.  
    
4.  
   let url_post = Vue.prototype.api.apiList.EXPORT_BILL; //請求地址
5.  
    
6.  
   let params_post = { //參數
7.  
   orderStartDate: this.timepickerDateFormat(this.rangeTime[0]) || this.rangeTime[0] || '',
8.  
   orderEndDate: this.timepickerDateFormat(this.rangeTime[1]) || this.rangeTime[1] || '',
9.  
   prodCode: this.prodId,
10.  
    promoteFlag: this.promotionSiteId,
11.  
    policyStatusList: this.tableBillStateCheckedData,
12.  
    };
13.  
     
14.  
    Vue.axios.post(url_post, params_post, {
15.  
    responseType: 'arraybuffer'
16.  
    }).then( (res) => {
17.  
     
18.  
    let fileName = res.headers['content-disposition'].match(/fushun(\S*)xls/)[0];
19.  
     
20.  
    fileDownload(res.data, fileName); //如果用方法一 ，這里需要安裝 npm install js-file-download --save ,然后引用 var fileDownload = require('js-file-download')，使用詳情見github;
21.  
    　　　　　　 // let blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
22.  
     
23.  
    　　　　　　 // let objectUrl = URL.createObjectURL(blob);
24.  
     
25.  
    　　　　　　 // window.location.href = objectUrl;
26.  
     
27.  
    }).catch( function (res) {});
28.  
    },

 

 

方法三（附加）：

1、接口要求： post方法、入參為json格式、出參文件流

* 2、axios：設置返回數據格式為 blob 或者 arraybuffer   （ 注意 ）

1.  
   axios({ // 用axios發送post請求
2.  
   method: 'post',
3.  
   url: ' /serviceTime/exportData', // 請求地址
4.  
   data: form, // 參數
5.  
   responseType: 'blob', // 表明返回服務器返回的數據類型
6.  
   headers: {
7.  
   'Content-Type': 'application/json'
8.  
   }
9.  
   }).then( res => { // 處理返回的文件流
10.  
    const blob = new Blob([res.data]);//new Blob([res])中不加data就會返回下圖中[objece objece]內容（少取一層）
11.  
    const fileName = '統計.xlsx';//下載文件名稱
12.  
    const elink = document.createElement('a');
13.  
    elink.download = fileName;
14.  
    elink.style.display = 'none';
15.  
    elink.href = URL.createObjectURL(blob);
16.  
    document.body.appendChild(elink);
17.  
    elink.click();
18.  
    URL.revokeObjectURL(elink.href); // 釋放URL 對象
19.  
    document.body.removeChild(elink);
20.  
    })

（ 上面代碼中少取一層的導出文件）：

 

 

				<script>
					(function(){
						function setArticleH(btnReadmore,posi){
							var winH = $(window).height();
							var articleBox = $("div.article_content");
							var artH = articleBox.height();
							if(artH > winH*posi){
								articleBox.css({
									'height':winH*posi+'px',
									'overflow':'hidden'
								})
								btnReadmore.click(function(){
									articleBox.removeAttr("style");
									$(this).parent().remove();
								})
							}else{
								btnReadmore.parent().remove();
							}
						}
						var btnReadmore = $("#btn-readmore");
						if(btnReadmore.length>0){
							if(currentUserName){
								setArticleH(btnReadmore,3);
							}else{
								setArticleH(btnReadmore,1.2);
							}
						}
					})()
				</script>
				</article>