一、自定義下載文件名稱

1、封裝下載方法（可以通過掛載在vue實例上成為全局函數）

import requset from 'axios'
// 經過請求攔截器、響應攔截器處理
onloadFileName(url,method,params,fileName){
	request({
		url:url,
		method:method,
		// get 方法傳參為例
		data:{
		...params
		},
		// 添加響應數據類型
		responseType: 'blob',
		// 添加文件下載特定請求頭
	    headers: {
	       'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
	     },
	}).then(res =>{
		// res 為響應攔截器返回的內容，大家可以對比自己的響應攔截器修改下面方法的判斷
		if (!data) {
	     this.$message.warning("文件下載失敗");
	      return;
	    }
	    // web Api種操作流文件的方法
	     if (typeof window.navigator.msSaveBlob !== "undefined") {
	     // msSaveBlob：只提供一個保存按鈕
	     // window.navigator.msSaveBlob(new Blob([data]),`${fileName}.txt`);
	     
	     // msSaveOrOpenBlob：提供保存和打開按鈕	
	     //window.navigator.msSaveOrOpenBlob(newBlob([data]),`${fileName}.txt`);
		     window.navigator.msSaveBlob(
		        new Blob([data]),
		        filename + ".xls"
		      );
	    } else {
	    // 自定義實現流文件下載
		      let url = window.URL.createObjectURL(new Blob([data]));
		      let link = document.createElement("a");
		      link.style.display = "none";
		      link.href = url;
		      link.setAttribute("download", fileName + ".xls");
		      document.body.appendChild(link);
		      link.click();
		      document.body.removeChild(link); //下載完成移除元素
		      window.URL.revokeObjectURL(url); //釋放掉blob對象
	    }
	})
}

2、調用下載方法

this.onloadFileName('xxx/xxx/xx','get',{id:'xxxxxxx'},'文件一')

二、文件名稱從后端響應頭數據中獲取

·1、處理響應攔截器返回的數據，將文件名暴露暴露出去

// 設置請求接受攔截器 響應攔截器中兼容處理流數據
serves.interceptors.response.use(response => {
	  // 設置接受數據之后，做什么處理
    const res = response.data
     if (!res.code && res.code === 200) {
     // 數據是流
        if(response.headers['content-disposition']){
            return {
                blobData:res,
                contentDisposition:response.headers['content-disposition']
            }
        }
        // 正常情況下
        else{
            return res
        }
       
    }
})

2、封裝下載方法

onloadFileName(url,method,params){
	request({
		url:url,
		method:method,
		// get 方法傳參為例
		data:{
		...params
		},
		// 添加響應數據類型
		responseType: 'blob',
		// 添加文件下載特定請求頭
	    headers: {
	       'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
	     },
	}).then(res =>{
		 if (!res.blobData) {
            this.$message.warning("文件下載失敗");
              return;
          }
          // web Api種操作流文件的方法
	     if (typeof window.navigator.msSaveBlob !== "undefined") {
		     // msSaveBlob：只提供一個保存按鈕
		     // window.navigator.msSaveBlob(new Blob([data]),`${fileName}.txt`);
		     
		     // msSaveOrOpenBlob：提供保存和打開按鈕	
		     //window.navigator.msSaveOrOpenBlob(newBlob([data]),`${fileName}.txt`);
             window.navigator.msSaveBlob(
                  new Blob([res.blobData]),
                  res.contentDisposition+ ".xls"
              );
           	} else {
               let url = window.URL.createObjectURL(new Blob([res.blobData],
                   { 
                    type:
                        ".xlsx"
                   } 
                ));
                let link = document.createElement("a");
                link.style.display = "none";
                link.href = url;
                // decodeURIComponent()解碼文件名稱
                // data.contentDisposition.split('=')[1] 分割文件名稱
                const fileName = decodeURIComponent(data.contentDisposition.split('=')[1])
                link.setAttribute("download",fileName);
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link); //下載完成移除元素
                window.URL.revokeObjectURL(url); //釋放掉blob對象
          }
}

3、調用下載方法

this.onloadFileName('xxx/xxx/xx','get',{id:'xxxxxxx'})

問題一：后端返回的數據無法解析
在請求函數中添加響應類型以及響應頭

問題二、后端返回的文件名經過相應攔截器后無法暴露出來導致無法獲取文件名報錯。
后端返回二進制流數據時設置請求頭，添加可暴露出的字段文章來源地址http://www.zghlxwxcb.cn/news/detail-856032.html

 response.setHeader("Access-Control-Expose-Headers", "Content-Disposition")
 response.setHeader("Content-Disposition", ...)

到了這里，關于前端實現流文件下載、導出功能解決方案的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！