没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
试读
2页
前言 本文基于 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';
资源详情
资源评论
资源推荐
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 = <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' }
})
weixin_38631197
- 粉丝: 5
- 资源: 943
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- Screenshot_20240427_031602.jpg
- 网页PDF_2024年04月26日 23-46-14_QQ浏览器网页保存_QQ浏览器转格式(6).docx
- 直接插入排序,冒泡排序,直接选择排序.zip
- 在排序2的基础上,再次对快排进行优化,其次增加快排非递归,归并排序,归并排序非递归版.zip
- 实现了7种排序算法.三种复杂度排序.三种nlogn复杂度排序(堆排序,归并排序,快速排序)一种线性复杂度的排序.zip
- 冒泡排序 直接选择排序 直接插入排序 随机快速排序 归并排序 堆排序.zip
- 课设-内部排序算法比较 包括冒泡排序、直接插入排序、简单选择排序、快速排序、希尔排序、归并排序和堆排序.zip
- Python排序算法.zip
- C语言实现直接插入排序、希尔排序、选择排序、冒泡排序、堆排序、快速排序、归并排序、计数排序,并带图详解.zip
- 常用工具集参考用于图像等数据处理
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0