一、前言

項目中前端采用的Element UI 框架， 遠程數據請求，使用的是axios，后端接口框架采用的asp.net webapi,數據導出成Excel采用NPOI組件。其業務場景，主要是列表頁(如會員信息，訂單信息等)表格數據導出，如表格數據進行了條件篩選，則需要將條件傳至后端api，篩選數據后，導出成Excel。

思考過前端導出的3種方案:

1.使用location.href 打開接口地址.缺點: 不能傳token至后端api, 無法保證接口的安全性校驗,并且接口只能是get方式請求.

2.采用axios請求接口，先在篩選后的數據服務端生成文件并保存，然后返回遠程文件地址，再采用 location.href打開文件地址進行下載. 缺點: 實現復雜，并且每次導出會在服務端生成文件，但是又沒有合適的時機再次觸發刪除文件，會在服務端形成垃圾數據。優點:每次導出都可以有記錄。

3. 采用axios請求接口，服務端api返回文件流，前端接收到文件流后，采用blob對象存儲，并創建成url, 使用a標簽下載. 優點:前端可傳token參數校驗接口安全性，并支持get或post兩種方式。

因其應用場景是導出Excel文件之前，必須篩選數據，并需要對接口安全進行校驗，所以第3種方案為最佳選擇。在百度之后，發現目前使用最多的也是第3種方案。

二、Vue + axios 前端處理

1.axios 需在response攔截器里進行相應的處理(這里不再介紹axios的使用, 關于axios的用法，具體請查看Axios中文說明 ，我們在項目中對axios進行了統一的攔截定義). 需特別注意: response.headers['content-disposition'],默認是獲取不到的,需要對服務端webapi進行配置，請查看第三點中webapi CORS配置

// respone攔截器service.interceptors.response.use( response => { // blob類型為文件下載對象，不論是什么請求方式，直接返回文件流數據 if (response.config.responseType === 'blob') {  const fileName = decodeURI(  response.headers['content-disposition'].split('filename=')[1]  )// 返回文件流內容，以及獲取文件名, response.headers['content-disposition']的獲取, 默認是獲取不到的,需要對服務端webapi進行配置  return Promise.resolve({ data: response.data, fileName: fileName }) } // 依據后端邏輯實際情況，需要彈窗展示友好錯誤 }, error => { let resp = error.response if (resp.data) {  console.log('err:' + decodeURIComponent(resp.data)) // for debug } // TODO: 需要依據后端實際情況判斷 return Promise.reject(error) })

2. 點擊導出按鈕，請求api. 需要注意的是接口請求配置的響應類型responseType:'blob' (也可以是配置arrayBuffer) ; 然IE9及以下瀏覽器不支持createObjectURL. 需要特別處理下IE瀏覽器將blob轉換成文件。

exportExcel () {  let params = {}  let p = this.getQueryParams() // 獲取相應的參數  if (p) params = Object({}, params, p)  axios  .get('接口地址', {   params: params,   responseType: 'blob'  })  .then(res => {   var blob = new Blob([res.data], {   type: 'application/vnd.ms-excel;charset=utf-8'   })   // 針對于IE瀏覽器的處理, 因部分IE瀏覽器不支持createObjectURL   if (window.navigator && window.navigator.msSaveOrOpenBlob) {   window.navigator.msSaveOrOpenBlob(blob, res.fileName)   } else {   var downloadElement = document.createElement('a')   var href = window.URL.createObjectURL(blob) // 創建下載的鏈接   downloadElement.href = href   downloadElement.download = res.fileName // 下載后文件名   document.body.appendChild(downloadElement)   downloadElement.click() // 點擊下載   document.body.removeChild(downloadElement) // 下載完成移除元素   window.URL.revokeObjectURL(href) // 釋放掉blob對象   }  }) }