前言
导出方式有很多种,但是若只需要数据导出成.xlsx文件并下载的话,只用xlsx
一个插件就行
目标
1 实现数据导出excel
2 如何设置表格列宽
3 如何在文件中创建工作表
准备工作
1 安装
npm i xlsx -S
2 引入
npm i xlsx -S
二、导出excel
创建文件
将数据和表头转换为工作表
创建工作表,并将数据和表头填充到工作表中
写入文件并设置文件名
AOA方式导出
exportAOAToExcel() {
// 表中数据
const list = [
["2016-05-03", "Tom", "No. 189, Grove St, Los Angeles"],
["2016-05-03", "1", "No. 189, Grove St, Los Angeles"],
["2016-05-03", "2", "No. 189, Grove St, Los Angeles"],
["2016-05-03", "3", "No. 189, Grove St, Los Angeles"],
];
const header = ["日期", "姓名", "地址"]; // 自定义的表头数组
const wb = XLSX.utils.book_new(); // 创建文件
const ws = XLSX.utils.aoa_to_sheet([header,...list||[]]); // 将数据和表头转换为工作表
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); // 工作表Sheet1
XLSX.writeFile(wb , Date.now()+".xlsx", { bookType: "xlsx", type: "buffer" }); // 保存为Excel文件
},
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
JSON方式导出
exportJSONToExcel(){
const list = [
{date:'2016-05-03',name:'1',address:'No. 1, Grove St, Los Angeles'},
{date:'2016-05-03',name:'2',address:'No. 2, Grove St, Los Angeles'},
{date:'2016-05-03',name:'3',address:'No. 3, Grove St, Los Angeles'},
{date:'2016-05-03',name:'4',address:'No. 4, Grove St, Los Angeles'},
];
const header = ["日期", "姓名", "地址"]; // 自定义的表头数组
const dataForExcel = list.map((item) => ({
'日期': item.date,
'姓名': item.name,
'地址': item.address,
}));
const wb = XLSX.utils.book_new();
const ws = XLSX.utils.json_to_sheet(dataForExcel, {header: header}); // 将数据和表头转换为工作表
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
XLSX.writeFile(wb,Date.now() +".xlsx", { bookType: "xlsx", type: "buffer" }); // 保存为Excel文件
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
效果
实现一个文件中两个工作表,列表的宽度固定,文件的名称
exportToExcel(header, list, title, sheet, wch) {
const bookTitle =
title ||
this.getCurrentTime(1)
.replace(/-/g, "")
.replace(/:/g, "")
.replace(" ", "");
const wb = XLSX.utils.book_new();
sheet.forEach((item, index) => {
const ws = XLSX.utils.aoa_to_sheet([header, ...(list[index] || [])]); // 将数据和表头转换为工作表
if (wch.length > 0) {
ws["!cols"] = wch; // 设置列宽
// ws["!cols"] = ws["!cols"];
}
XLSX.utils.book_append_sheet(wb, ws, item || "Sheet1");
});
XLSX.writeFile(wb, bookTitle + ".xlsx", {
bookType: "xlsx",
type: "buffer",
}); // 保存为Excel文件
},
exportSheet() {
const header = ["姓名", "年龄"];
const list = [
[
["张三", 24],
["李四", 24],
],
[
["王五", 24],
["李四", 24],
],
];
const wch = [{ wch: 10 }, { wch: 30}]; // 设置列宽
const sheet = ["一班", "二班"];
const title = "学校";
this.exportToExcel(header, list, title, sheet, wch);
},
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.