快捷導(dǎo)航

Angular Excel 導(dǎo)入與導(dǎo)出的實現(xiàn)代碼

更新時間：2019年04月17日 15:13:52 作者：ValueMar

這篇文章主要介紹了Angular Excel 導(dǎo)入與導(dǎo)出的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前言

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

雖然代碼是基于angular 7.2.7，但是語法是基于 angular 4.X 以上均可使用。在項目開發(fā)過程中，我們經(jīng)常需要跟后端進(jìn)行文件交互，常見的諸如圖片上傳，excel 導(dǎo)入與導(dǎo)出等。這里我們只討論關(guān)于excel 的導(dǎo)入與導(dǎo)出。

Excel 導(dǎo)入

excel 導(dǎo)入在angular 中其實非常簡單，只需要安裝 xlsx插件就可以了。

安裝 xlsx 插件

npm install xlsx --save

在component 中導(dǎo)入

import * as XLSX from 'xlsx';

關(guān)鍵代碼

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 導(dǎo)出

傳統(tǒng)的導(dǎo)出功能我們一般是放在后端實現(xiàn)，由后端生成文件的Url或者文件流給到前端。注：這種是通過瀏覽器的下載功能直接下載的。一般有以下幾種方式實現(xiàn)：

get 請求 + window.open(url)

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

post 請求 + <a>標(biāo)簽

前端代碼：

exportExcel(codeList: string[]) {
  return this.http.post(this.ExportExcelByCodesUrl, codeList, {
   responseType: 'arraybuffer',//設(shè)置響應(yīng)類型
   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); //創(chuàng)建下載的鏈接
   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 = {""};//業(yè)務(wù)代碼
  string[] propertyNameCn = {""};//業(yè)務(wù)代碼
  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"); 

                   });
         });

后端代碼

這里關(guān)鍵點是需要設(shè)置跨域的響應(yīng)頭（也就是“Download-FileName”），具體每個語言有自己的實現(xiàn)方式。如果不設(shè)置的話，前端無法獲取響應(yīng)頭。

post 請求 + form 表單 + iframe 標(biāo)簽（暫無代碼實現(xiàn)）

總結(jié)

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