angular FileSaver、XLSX 导入导出

本文章记录了在工作过程中，文件导入导出功能的实现。

需要安装和引入

import * as XLSX from 'xlsx';
import * as FileSaver from 'file-saver';

一、文件的导出两种方式：

推荐大家使用方式一，方式一比较灵活，如果导出的部分确定只是表格的话，方法二也是很方便的。

方式一：页面按钮调用代码方法即可。

exportTest():void{const data = [['1','a','aa'],['2','b','bb'],['3','c','cc']];/* generate worksheet */const ws: XLSX.WorkSheet = XLSX.utils.aoa_to_sheet(data);const ws2: XLSX.WorkSheet = XLSX.utils.aoa_to_sheet(data);/* generate workbook and add the worksheet */const wb: XLSX.WorkBook = XLSX.utils.book_new();XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');XLSX.utils.book_append_sheet(wb, ws2, 'Sheet2');console.log(wb)/* save to file */XLSX.writeFile(wb, 'SheetJS.xlsx');}

方式二：页面按钮调用代码方法即可。

export():void{const exportArr = [];for(let i=0;i<6;i++) {const obj = {"名称":"张三","年龄":18};exportArr.push(obj);}   //将JSON数组转换为表格格式const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(exportArr);const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });const fileName = "testFile";const data: Blob = new Blob([excelBuffer], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'});FileSaver.saveAs(data, fileName + '.xlsx');}

二、文件的导入：

上面导出方式都可以用下面的方式处理，获取文件内容后，根据自己情况解析就行！

init():void{$('#fileList').change(function () {that.importSure();});
}
import():void{$("#fileList").click();
}importSure():void{const that = this;const xlsxFile = $('#fileList')[0].files[0];const index = xlsxFile.name.lastIndexOf(".");if (index !== -1) {const ext = xlsxFile.name.substr(index+1).toLowerCase();if (ext !==  'xls' && ext !==  'xlsx') {alert('只能上传.xlsx、.xls文件');return;}} else {alert('只能上传.xlsx、.xls文件');return;}let wb; //读取Excel的数据const reader = new FileReader();reader.readAsArrayBuffer(xlsxFile);reader.onload = function (e) {const data = this.result;wb = XLSX.read(data, { type: 'array'});const oldExcelTab = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]],{raw:true, header:1});// oldExcelTab 可能包含空行，要把空行去掉const excelTab = [];for (let i=0;i<oldExcelTab.length;i++) {const excelOne = oldExcelTab[i];// @ts-ignoreif (excelOne.length > 0) {excelTab.push(excelOne);}}let keysData = [];// @ts-ignorekeysData = excelTab[0]; //表头数组if(keysData.length === 2){if (keysData[0] === "名称 && keysData[1] === "年龄"){for (let i=1;i< 6;i++) {//文件的内容console.log(excelTab[i][0])console.log(excelTab[i][1])}} else {alert("导入文件不符合要求!!!");}}else {alert("导入文件不符合要求!!!");}};
}

<button (click)="import()"> 导入 </button>
<div style="display: none"><input type="text"id="importText"/><input type="file" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" id="fileList">
</div>

上面代码，自己写的测试没有问题的！从自己代码中摘出来的时候，删去了针对自己项目需求的特别处理，运行时如果有问题，稍微调试下就可以了哦！

好用记得点赞。。。

angular FileSaver、XLSX 导入导出相关推荐

vue xlsx 导入导出_只需三步vue实现excel文件数据提取并存为json数据
前言: 以前将excel数据导入到数据库是通过前端,将excel文件上传到后端,通过后端语言进行相应的加工将excel文件中的数据取出并存入数据库:从而实现数据库的存入流程.但是这也带来了一些问题,首 ...
Vue2.js：xlsx实现Excel文件的导入导出
需求: Vue2.js + ElementUI 项目,通过xlsx实现一个前端的 Excel 导入和导出功能文档 https://www.npmjs.com/package/xlsx https:/ ...
ASP.NET Core 导入导出Excel xlsx 文件
ASP.NET Core 使用EPPlus.Core导入导出Excel xlsx 文件,EPPlus.Core支持Excel 2007/2010 xlsx文件导入导出,可以运行在Windows, Li ...
Java：实现文件批量导入导出实践（兼容xls,xlsx）
点击上方"Java知音",选择"置顶公众号" 技术文章第一时间送达! 作者:小卖铺的老爷爷 cnblogs.com/laoyeye/p/6938889.html ...
Java实现文件批量导入导出实例（兼容xls,xlsx）
<link href="https://csdnimg.cn/public/favicon.ico" rel="SHORTCUT ICON"> &l ...
Java Excel导入和导出（支持xls导入，xlsx导入，图片导出，百万数据量导出）
免费源码下载(提取码:qdhy) 工程结构目录所需JAR包 <dependencies><dependency><grou ...
java导入导出有版本兼容问题_Java实现文件批量导入导出实践（兼容xls,xlsx）
小Hub领读: 使用poi导入导出xls文件还是比较容易的,有完整的项目代码,可以clone下来好好研究哈! 1.介绍 java 实现文件的导入导出数据库,目前在大部分系统中是比较常见的功能了,今天写 ...
vue+xlsx实现表格的导入导出:
文章目录一.vue前端使用xlsx和 xlsx-style 导出excel,并修改样式: 1.改造后效果: 2.实现: 3.引入库xlsx-style 4.excelUtil.js文件二.前端xl ...
vue+file-saver+xlsx导出table为excel
1.安装:npm install file-saver xlsx --save-dev 2.引入:import FileSaver from 'file-save'; import XLSX from ...

angular FileSaver、XLSX 导入导出

angular FileSaver、XLSX 导入导出相关推荐

最新文章

热门文章