angular纯前端导出Excel(2)

原文链接：angular纯前端导出Excel(2) – 每天进步一点点 (longkui.site)

0.前言

上一篇文章中，简单介绍了一种angular纯前端导出excel的方法。

这篇文章，找到第二种纯前端导出excel的方法，导出json文件。

1.方法

首先需要按照两个插件

npm install xlsx --save
npm install file-saver --save   

或者使用yarn 安装

yarn add xlsx
yarn add file-saver

在ts文件中加入

import { saveAs } from "file-saver"
import * as XLSX from 'xlsx';

然后参考如下代码：

exportExcel() {

let jsonData1=[

{"name":"张三","sex":"男","age":"12"},

{"name":"张三2","sex":"男","age":"11"},

{"name":"张三3","sex":"女","age":"14"},

]

let jsonData2=[

{"name":"李四","sex":"男","age":"11"},

{"name":"李四2","sex":"男","age":"13"},

{"name":"李四3","sex":"女","age":"14"},

]

const worksheet1: XLSX.WorkSheet = XLSX.utils.json_to_sheet(jsonData1);

const worksheet2:XLSX.WorkSheet = XLSX.utils.json_to_sheet(jsonData2)

const workbook: XLSX.WorkBook = {

Sheets: { '表1': worksheet1,"表2":worksheet2},

SheetNames: ['表1','表2']

};

const excelBuffer: any = XLSX.write(workbook, { bookType: 'xls', type: 'array' });

this.saveAsExcelFile(excelBuffer, "excel表格");

}

private saveAsExcelFile(buffer: any, fileName: string) {

const data: Blob = new Blob([buffer], {

type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'

});

saveAs(data, fileName + '.xls');

}

这个导出方法的好处是可以导出json数据，不用考虑前端表格的一些checkbox的东西还有一些额外的按钮。