需求:前端实现将后台返回的数组数据转化为多页excel,并自定义样式
使用组件
1、xlsx
2、xlsx-js-style(官方:https://www.npmjs.com/package/xlsx-js-style)
xlsx这个插件可以把html中的table元素或者json数据转换成表格后进行导出
常用方法 | 参数 | 说明 |
---|---|---|
book_new | - | 创建一个空的book |
table_to_book | table元素(dom) | 将table元素转换成 book |
table_to_sheet | table元素(dom) | 将table元素转换成 sheet |
json_to_sheet | json数据(数组) | 将json数据转换成 sheet |
book_append_sheet | 参数1:book对象,参数2:sheet对象,参数3:sheet名称 | 将sheet添加到book中 |
writeFile | 参数1:book对象,参数2:导出的文件名称 | 导出表格文件 |
本来准备使用 xlsx-style,但引入会报很多错,找到xlsx-js-style组件代替,使用方法相同
一、安装依赖
npm install xlsx --save
npm install file-saver --save
//样式组件
npm install xlsx-js-style
二、代码
//html
<button (click)="handleOk()">下载</button>
//ts
import * as XLSX from 'xlsx/xlsx.mjs';
var FileSaver = require('file-saver');
import * as XLSXStyle from 'xlsx-js-style';
// 下载excel
exportFile(): void {
//生成excel表的数据[{},...{}],每个对象代表一行,key值代表列名
let json1: any = []
//数组
this.DataArr1.forEach(arr => {
json1.push({
"id": arr.Id,
"code": arr.Code,
"type": arr.Type,
})
})
let json2: any = []
this.DataArr2.forEach(arr => {
json2.push({
"id": arr.Id,
"code": arr.Code,
"type": arr.Type,
})
})
const worksheet1: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json1,);
const worksheet2: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json2,);
//设置自定义样式
this.setExlStyle(worksheet1);
this.setExlStyle(worksheet2);
const workbook: XLSX.WorkBook = {
Sheets: { '页面1': worksheet1, "页面2": worksheet2},
SheetNames: ['页面1', '页面2']
};
const excelBuffer: any = XLSXStyle.write(workbook, { bookType: 'xlsx', type: 'array' });
//转成二进制流
const data: Blob = new Blob([excelBuffer], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
});
FileSaver.saveAs(data, '文件名' + new Date().toLocaleDateString() + '.xls');
}
//设置自定义样式
setExlStyle(data) {
data["!cols"] = [];
for (let key in data) {
if (data[key] instanceof Object) {
if (key === 'A1' || key === 'B1' || key === 'C1' || key === 'D1' || key === 'E1' || key === 'F1' || key === 'G1') {
data[key].s = {
// 字体
font: {
name: 'Microsoft YaHei UI',
sz: 10,
color: { rgb: "ffffff" },
bold: true
},
alignment: {
vertical: 'center',
horizontal: 'center',
},
fill: {
fgColor: { rgb: "298103" },
},
}
} else {
data[key].s = {
// 字体
font: {
name: 'Microsoft YaHei UI',
sz: 10,
},
alignment: {
vertical: 'center',
horizontal: 'left',
},
}
}
}
data["!cols"].push({ wpx: 115 });
}
return data;
}