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模拟弹出效果代码修正版
Aug 07 Javascript
javascript控制frame,iframe的src属性代码
Dec 31 Javascript
jQuery学习之prop和attr的区别示例介绍
Nov 15 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
vue.js todolist实现代码
Oct 29 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 Javascript
jquery无缝图片轮播组件封装
Nov 25 jQuery
vue 项目软键盘回车触发搜索事件
Sep 09 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
详解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
PHP统计二维数组元素个数的方法
2013/11/12 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python中print函数简单使用总结
2019/08/05 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
蔻驰西班牙官网:COACH西班牙
2019/01/16 全球购物
商得四方公司面试题(gid+)
2014/04/30 面试题
文明家庭先进事迹材
2014/01/27 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
销售内勤岗位职责
2015/02/10 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
详解redis在微服务领域的贡献
2021/10/16 Redis
nginx 配置指令之location使用详解
2022/05/25 Servers