碼上歡樂
相關內容    簡體    繁體

基於Vue + axios + WebApi + NPOI導出Excel文件

本文轉載自   查看原文   2019-06-04 22:59   2783    Vue

一、前言

項目中前端采用的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配置

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

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

  1. exportExcel () {
  2.       let params = {}
  3.       let p = this.getQueryParams() // 獲取相應的參數
  4.       if (p) params = Object({}, params, p)
  5.       axios
  6.         .get('接口地址', {
  7.           params: params,
  8.           responseType: 'blob'
  9.         })
  10.         .then(res => {
  11.           var blob = new Blob([res.data], {
  12.             type: 'application/vnd.ms-excel;charset=utf-8'
  13.           })
  14.           // 針對於IE瀏覽器的處理, 因部分IE瀏覽器不支持createObjectURL
  15.           if (window.navigator && window.navigator.msSaveOrOpenBlob) {
  16.             window.navigator.msSaveOrOpenBlob(blob, res.fileName)
  17.           } else {
  18.             var downloadElement = document.createElement('a')
  19.             var href = window.URL.createObjectURL(blob) // 創建下載的鏈接
  20.             downloadElement.href = href
  21.             downloadElement.download = res.fileName // 下載后文件名
  22.             document.body.appendChild(downloadElement)
  23.             downloadElement.click() // 點擊下載
  24.             document.body.removeChild(downloadElement) // 下載完成移除元素
  25.             window.URL.revokeObjectURL(href) // 釋放掉blob對象
  26.           }
  27.         })
  28.     }

   

三、WebApi + NPOI 后端處理

1. 需要通過接口參數，查詢數據

為了保持與分頁組件查詢接口一直的參數，采用了get請求方式，方便前端傳參。webapi接口必須返回IHttpActionResult 類型

  1. [HttpGet]
  2.         public IHttpActionResult ExportData([FromUri]Pagination pagination, [FromUri] OrderReqDto dto)
  3.         {
  4.             //取出數據源
  5.             DataTable dt = this.Service.GetMemberPageList(pagination, dto.ConvertToFilter());
  6.             if (dt.Rows.Count > 65535)
  7.             {
  8.                 throw new Exception("最大導出行數為65535行,請按條件篩選數據！");
  9.             }
  10.             foreach (DataRow row in dt.Rows)
  11.             {
  12.                 var isRealName = row["IsRealName"].ToBool();
  13.                 row["IsRealName"] = isRealName ? "是" : "否";
  14.             }
  15.             var model = new ExportModel();
  16.             model.Data = JsonConvert.SerializeObject(dt);
  17.             model.FileName = "會員信息";
  18.             model.Title = model.FileName;
  19.             model.LstCol = new List<ExportDataColumn>();
  20.             model.LstCol.Add(new ExportDataColumn() { prop = "FullName", label = "會員名稱" });
  21.             model.LstCol.Add(new ExportDataColumn() { prop = "RealName", label = "真實姓名" });
  22.             model.LstCol.Add(new ExportDataColumn() { prop = "GradeName", label = "會員等級" });
  23.             model.LstCol.Add(new ExportDataColumn() { prop = "Telphone", label = "電話" });
  24.             model.LstCol.Add(new ExportDataColumn() { prop = "AreaName", label = "區域" });
  25.             model.LstCol.Add(new ExportDataColumn() { prop = "GridName", label = "網格" });
  26.             model.LstCol.Add(new ExportDataColumn() { prop = "Address", label = "門牌號" });
  27.             model.LstCol.Add(new ExportDataColumn() { prop = "RegTime", label = "注冊時間" });
  28.             model.LstCol.Add(new ExportDataColumn() { prop = "Description", label = "備注" });
  29.             return ExportDataByFore(model);
  30.         }

2.關鍵導出函數 ExportDataByFore的實現

  1. [HttpGet]
  2.         public IHttpActionResult ExportDataByFore(ExportModel dto)
  3.         {
  4.             var dt = JsonConvert.DeserializeObject<DataTable>(dto.Data);
  5.             var fileName = dto.FileName + DateTime.Now.ToString("yyMMddHHmmssfff") + ".xls";
  6.             //設置導出格式
  7.             ExcelConfig excelconfig = new ExcelConfig();
  8.             excelconfig.Title = dto.Title;
  9.             excelconfig.TitleFont = "微軟雅黑";
  10.             excelconfig.TitlePoint = 25;
  11.             excelconfig.FileName = fileName;
  12.             excelconfig.IsAllSizeColumn = true;
  13.             //每一列的設置,沒有設置的列信息，系統將按datatable中的列名導出
  14.             excelconfig.ColumnEntity = new List<ColumnEntity>();
  15.             //表頭
  16.             foreach (var col in dto.LstCol)
  17.             {
  18.                 excelconfig.ColumnEntity.Add(new ColumnEntity() { Column = col.prop, ExcelColumn = col.label });
  19.             }
  20.             //調用導出方法
  21.             var stream = ExcelHelper.ExportMemoryStream(dt, excelconfig); // 通過NPOI形成將數據繪制成Excel文件並形成內存流
  22.             var browser = String.Empty;
  23.             if (HttpContext.Current.Request.UserAgent != null)
  24.             {
  25.                 browser = HttpContext.Current.Request.UserAgent.ToUpper();
  26.             }
  27.             HttpResponseMessage httpResponseMessage = new HttpResponseMessage(HttpStatusCode.OK);
  28.             httpResponseMessage.Content = new StreamContent(stream);
  29.             httpResponseMessage.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream"); // 返回類型必須為文件流 application/octet-stream
  30.             httpResponseMessage.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment") // 設置頭部其他內容特性, 文件名
  31.             {
  32.                 FileName =
  33.                     browser.Contains("FIREFOX")
  34.                         ? fileName
  35.                         : HttpUtility.UrlEncode(fileName)
  36.             };
  37.             return ResponseMessage(httpResponseMessage);
  38.         }

3. web api 的CORS配置

采用web api 構建后端接口服務的同學，都知道，接口要解決跨域問題，都需要進行api的 CORS配置, 這里主要是針對於前端axios的響應response header中獲取不到 content-disposition屬性,進行以下配置

四、總結

以上就是我在實現axios導出Excel文件功能時，遇到的一些問題，以及關鍵點進行總結。因為項目涉及到前后端其他業務以及公司架構的一些核心源碼。要抽離一個完整的demo,比較耗時，所以沒有完整demo展示. 但我已把NPOI相關的操作函數源碼，整理放至github上。https://github.com/yinboxie/BlogExampleDemo


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 C# 使用NPOI導出Excel文件 NPOI導出excel NPOI DataSet導出excel 基於NPOI導出Excel 導出Excel 2007 (NPOI) NPOI導出Excel 65536限制 NPOI復制模板導出Excel .NET NPOI導出Excel詳解 基於NPOI的Excel導入導出類庫 .NET NPOI導出Excel詳解
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM