Angular Excel 匯入與匯出

ValueMar發表於2019-04-17
AngularExcel

前言

本文基於 angular v7.2.7，初次編寫於2019-4-17。

雖然程式碼是基於angular 7.2.7，但是語法是基於 angular 4.X 以上均可使用。在專案開發過程中，我們經常需要跟後端進行檔案互動，常見的諸如 圖片上傳，excel 匯入與匯出等。這裡我們只討論關於excel 的匯入與匯出。


Excel 匯入

excel 匯入在angular 中其實非常簡單，只需要安裝 xlsx外掛 就可以了。

  • 安裝 xlsx 外掛

npm install xlsx --save

  • 在component 中匯入

import * as XLSX from 'xlsx';

  • 關鍵程式碼
import * as XLSX from 'xlsx';

excelData = [];

importExcel(evt: any) {
    /* wire up file reader */
    const target: DataTransfer = <DataTransfer>(evt.target);
    if (target.files.length !== 1) throw new Error('Cannot use multiple files');
    const reader: FileReader = new FileReader();
    reader.onload = (e: any) => {
      /* read workbook */
      const bstr: string = e.target.result;
      const wb: XLSX.WorkBook = XLSX.read(bstr, { type: 'binary' });

      /* grab first sheet */
      const wsname: string = wb.SheetNames[0];
      const ws: XLSX.WorkSheet = wb.Sheets[wsname];

      /* save data */
      this.excelData = (XLSX.utils.sheet_to_json(ws, { header: 1 }));

      evt.target.value = "" // 清空
    };
    reader.readAsBinaryString(target.files[0]);

  }複製程式碼


Excel 匯出

傳統的匯出功能我們一般是放在後端實現，由後端生成檔案的Url或者檔案流給到前端。注：這種是通過瀏覽器的下載功能直接下載的。一般有以下幾種方式實現：

  • get 請求 + window.open(url)

後端返回一個 檔案的url 或者 檔案流，這種方式均可以直接下載。前提是http請求為get。

  • post 請求 + <a>標籤

前端程式碼：

exportExcel(codeList: string[]) {
    return this.http.post(this.ExportExcelByCodesUrl, codeList, {
      responseType: 'arraybuffer',//設定響應型別
      observe:"response",//返回response header
      headers: { 'Content-Type': 'application/json' }
    })
      .subscribe((response:any)=>{
        this.downLoadFile(response, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8")
      })

  }

 /**
   * Method is use to download file.
   * @param data - Array Buffer data
   * @param type - type of the document.
 */
downLoadFile(data: any, type: string) {
     var blob = new Blob([data.body], { type: type});
     let downloadElement = document.createElement('a');
     let href = window.URL.createObjectURL(blob); //建立下載的連結
     downloadElement.href = href;
     let filename = data.headers.get("Download-FileName");//後端返回的自定義header
     downloadElement.download = decodeURI(filename); 

     document.body.appendChild(downloadElement);
     downloadElement.click(); //點選下載
     document.body.removeChild(downloadElement); //下載完成移除元素
     window.URL.revokeObjectURL(href); //釋放掉blob物件
  }複製程式碼

後端程式碼:

這裡後端是使用的Asp.Net Core 2.1 

 public IActionResult CreateExcel(string fileName,List<ExportProductModel> list)
 {
   string[] propertyNames = {""};//業務程式碼
   string[] propertyNameCn = {""};//業務程式碼
   MemoryStream ms = ExcelsHelper<ExportProductModel>.ListToExcel(fileName, list, propertyNames, propertyNameCn);
   HttpContext.Response.Headers.Add("Download-FileName",WebUtility.UrlEncode(fileName));
   return File(ms, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;", WebUtility.UrlEncode(fileName));
 }

services.AddCors(options =>
                 {
                   options.AddPolicy("AllowAllOrigin", builder =>
                                     {
                                       builder.AllowAnyHeader()
                                         .AllowAnyMethod()
                                         .AllowAnyOrigin()
                                         .AllowCredentials()
                                         .WithExposedHeaders("Download-FileName"); 

                                     });
                 });複製程式碼

後端程式碼這裡關鍵點是需要設定跨域的響應頭（也就是“Download-FileName”），具體每個語言有自己的實現方式。如果不設定的話，前端無法獲取響應頭。

  • post 請求 + form 表單 + iframe 標籤（暫無程式碼實現）


總結

我在開發過程中有遇到以下幾個問題，折騰了很久：

  • 前後端的MIME型別沒有對應，導致檔案無法成功下載，這裡是 完整的MIME型別列表
  • 無法獲取response header，原因有二：

（1）後端沒有設定跨域的響應頭

（2）前端的http請求 語法書寫錯誤，一直獲取到的是http response body，而非完整的http response。完整寫法參考以上程式碼，關鍵是 ： observe:"response"


最後，希望這篇文章能夠幫助到你，共勉！


相關文章