DDR爱好者之家 Design By 杰米
前言
本文基于 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"
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月25日
2024年11月25日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]