Angular Excel 导入与导出-白红宇

前言

本文基于 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 = 
          
           (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
          
            list) {   string[] propertyNames = {
         ""};//业务代码   string[] propertyNameCn = {
         ""};//业务代码   MemoryStream ms = ExcelsHelper
           
            .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类型没有对应，导致文件无法成功下载，这里是

无法获取response header，原因有二：

（1）后端没有设置跨域的响应头

（2）前端的http请求语法书写错误，一直获取到的是http response body，而非完整的http response。完整写法参考以上代码，关键是： observe:"response"

最后，希望这篇文章能够帮助到你，共勉！