歡迎光臨
每天分享高質量文章

Vue+axios+WebAPI+NPOI匯出Excel檔案

作者:沉澱的風

鏈接:https://www.cnblogs.com/xyb0226/p/10976819.html

一、前言

專案中前端採用的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.essay-headers[‘content-disposition’],預設是獲取不到的,需要對服務端webapi進行配置,請查看第三點中webapi CORS配置

// respone攔截器
service.interceptors.response.use(
  response => {
    // blob型別為檔案下載物件,不論是什麼請求方式,直接傳回檔案流資料
    if (response.config.responseType === 'blob') {
      const fileName = decodeURI(
        response.essay-headers['content-disposition'].split('filename=')[1]
      )
      // 傳回檔案流內容,以及獲取檔案名, response.essay-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();
    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(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();
    //表頭
    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、WebAPI的CORS配置

 

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

 

四、總結

以上就是我在實現axios匯出Excel檔案功能時,遇到的一些問題,以及關鍵點進行總結。因為專案涉及到前後端其他業務以及公司架構的一些核心原始碼。

 

要抽離一個完整的demo,比較耗時,所以沒有完整demo展示. 但我已把NPOI相關的操作函式原始碼,整理放至github上。

https://github.com/yinboxie/BlogExampleDemo

赞(0)

分享創造快樂