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


Posted in Javascript onApril 17, 2019

前言

本文基于 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"

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
Mar 08 Javascript
关于JQuery($.load)事件的用法和分析
Apr 09 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
ES6中的Javascript解构的实现
Oct 30 Javascript
详解Vue路由自动注入实践
Apr 17 #Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 #Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 #Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 #Javascript
Vue源码探究之虚拟节点的实现
Apr 17 #Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 #Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 #Javascript
You might like
收音机术语解释
2021/03/01 无线电
PHP 类型转换函数intval
2009/06/20 PHP
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
关于php中一些字符串总结
2016/05/05 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
php中数组最简单的使用方法
2020/12/27 PHP
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
python 捕获shell脚本的输出结果实例
2017/01/04 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
Python 统计字数的思路详解
2018/05/08 Python
python调用自定义函数的实例操作
2019/06/26 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
Python 防止死锁的方法
2020/07/29 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
迟到早退检讨书
2014/02/10 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
司机职责范本
2014/03/08 职场文书
运动会班级口号
2014/06/09 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
六查六看自查报告
2014/10/14 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
读书笔记怎么写
2015/07/01 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书