Angular Excel 导入与导出的实现代码

作者: 邻家坏孩纸
来源: 51数据库
2021-07-08

前言

本文基于 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  //创建下载的链接
   downloadelement.
   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"

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。