前言

本文基于 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對象 }