一、前言

創(chuàng)新互聯(lián)專注于企業(yè)營銷型網站、網站重做改版、靈寶網站定制設計、自適應品牌網站建設、HTML5、商城建設、集團公司官網建設、外貿營銷網站建設、高端網站制作、響應式網頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為靈寶等各大城市提供網站開發(fā)制作服務。

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

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

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

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

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

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

二、Vue + axios 前端處理

1.axios 需在response攔截器里進行相應的處理(這里不再介紹axios的使用, 關于axios的用法，具體請查看Axios中文說明 ，我們在項目中對axios進行了統(tǒng)一的攔截定義). 需特別注意: 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)
 }
)

本文標題：Vue+axios+WebApi+NPOI導出Excel文件實例方法-創(chuàng)新互聯(lián)
URL標題：http://weahome.cn/article/docspi.html