一、前言
項目中前端采用的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對象 } }) }三、WebApi + NPOI 后端處理
1. 需要通過接口參數，查詢數據
為了保持與分頁組件查詢接口一直的參數，采用了get請求方式，方便前端傳參。webapi接口必須返回IHttpActionResult 類型
[HttpGet] public IHttpActionResult ExportData([FromUri]Pagination pagination, [FromUri] OrderReqDto dto) { //取出數據源 DataTable dt = this.Service.GetMemberPageList(pagination, dto.ConvertToFilter()); if (dt.Rows.Count > 65535) { throw new Exception("最大導出行數為65535行,請按條件篩選數據！"); } foreach (DataRow row in dt.Rows) { var isRealName = row["IsRealName"].ToBool(); row["IsRealName"] = isRealName ? "是" : "否"; } var model = new ExportModel(); model.Data = JsonConvert.SerializeObject(dt); model.FileName = "會員信息"; model.Title = model.FileName; model.LstCol = new List<ExportDataColumn>(); model.LstCol.Add(new ExportDataColumn() { prop = "FullName", label = "會員名稱" }); model.LstCol.Add(new ExportDataColumn() { prop = "RealName", label = "真實姓名" }); model.LstCol.Add(new ExportDataColumn() { prop = "GradeName", label = "會員等級" }); model.LstCol.Add(new ExportDataColumn() { prop = "Telphone", label = "電話" }); model.LstCol.Add(new ExportDataColumn() { prop = "AreaName", label = "區域" }); model.LstCol.Add(new ExportDataColumn() { prop = "GridName", label = "網格" }); model.LstCol.Add(new ExportDataColumn() { prop = "Address", label = "門牌號" }); model.LstCol.Add(new ExportDataColumn() { prop = "RegTime", label = "注冊時間" }); model.LstCol.Add(new ExportDataColumn() { prop = "Description", label = "備注" }); return ExportDataByFore(model); }2.關鍵導出函數 ExportDataByFore的實現
[HttpGet] public IHttpActionResult ExportDataByFore(ExportModel dto) { var dt = JsonConvert.DeserializeObject<DataTable>(dto.Data); var fileName = dto.FileName + DateTime.Now.ToString("yyMMddHHmmssfff") + ".xls"; //設置導出格式 ExcelConfig excelconfig = new ExcelConfig(); excelconfig.Title = dto.Title; excelconfig.TitleFont = "微軟雅黑"; excelconfig.TitlePoint = 25; excelconfig.FileName = fileName; excelconfig.IsAllSizeColumn = true; //每一列的設置,沒有設置的列信息，系統將按datatable中的列名導出 excelconfig.ColumnEntity = new List<ColumnEntity>(); //表頭 foreach (var col in dto.LstCol) { excelconfig.ColumnEntity.Add(new ColumnEntity() { Column = col.prop, ExcelColumn = col.label }); } //調用導出方法 var stream = ExcelHelper.ExportMemoryStream(dt, excelconfig); // 通過NPOI形成將數據繪制成Excel文件并形成內存流 var browser = String.Empty; if (HttpContext.Current.Request.UserAgent != null) { browser = HttpContext.Current.Request.UserAgent.ToUpper(); } HttpResponseMessage httpResponseMessage = new HttpResponseMessage(HttpStatusCode.OK); httpResponseMessage.Content = new StreamContent(stream); httpResponseMessage.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream"); // 返回類型必須為文件流 application/octet-stream httpResponseMessage.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment") // 設置頭部其他內容特性, 文件名 { FileName = browser.Contains("FIREFOX") ? fileName : HttpUtility.UrlEncode(fileName) }; return ResponseMessage(httpResponseMessage); }3. web api 的CORS配置
采用web api 構建后端接口服務的同學，都知道，接口要解決跨域問題，都需要進行api的 CORS配置, 這里主要是針對于前端axios的響應response header中獲取不到 content-disposition屬性,進行以下配置
四、總結
以上就是我在實現axios導出Excel文件功能時，遇到的一些問題，以及關鍵點進行總結。因為項目涉及到前后端其他業務以及公司架構的一些核心源碼。要抽離一個完整的demo,比較耗時，所以沒有完整demo展示. 但我已把NPOI相關的操作函數源碼，整理放至github上。https://github.com/yinboxie/BlogExampleDemo
新聞熱點
疑難解答
