前端使用xlsx模板导出表格

前言

前端导出表格有很多种方案，但是表格样式一旦复杂了，那么就得用代码写excel的样式，还是比较麻烦的。每次样式不一样，就得重新写，这时使用表格模板的优势就体现出来了，想导出不同样式的表格直接修改表格模板即可。
方案

我找了两种方案：
1、使用xlsx-template，利用模板语法在xlsx中占位填充后编辑导出。
2、使用exceljs，读取模板后，利用行列坐标定位编辑后导出。
两种我都尝试过，第一种方案类似我这篇文章(https://xiblogs.top/?id=27) 中使用的docxtemplater，只不过是docx换成了xlsx，但xlsx-template在浏览器端的兼容不如docxtemplater那么好，你得处理fs、path之类的问题，当然也有老哥(https://www.jianshu.com/p/85c844d96cfb) 通过改项目配置的方式解决了。还是比较麻烦的而且老项目不一定适用，所以我使用了第二种方案。
步骤

1、安装exceljs与file-saver

1. npm i exceljs
2. npm i file-saver

复制代码

2、xlsx模板放在项目的public目录下。

3、使用fetch的方式读取public下的xlsx模板。

1. let response = await fetch('./static/xlsx/t1.xlsx'); //读取文件

复制代码

4、将读取的数据转换为buffer再使用exceljs的workbook.xlsx.load加载数据。

1. let data = await response.arrayBuffer(); //转为二进制
2. const workbook = new ExcelJS.Workbook();
3. await workbook.xlsx.load(data); //读取buffer
4. const worksheet = workbook.getWorksheet(1); //读取第一张表

复制代码

5、利用exceljs的worksheet.getCell()给指定单元格赋值，getCell参数为行列，如修改第一行第一列数据为test。

1. worksheet.getCell('A1').value = 'test'

复制代码

6、使用exceljs的writeBuffer()读取表格为buffer后再使用file-saver的saveAs下载。

1. await workbook.xlsx.writeBuffer().then(async (buffer) => {
2.         let blob = new Blob([buffer], { type: 'application/octet-stream' });
3.         await saveAs(blob, 'exportExcel.xlsx');
4.         this.loading = false;
5. });

复制代码

完整方法如下：

1. //templateExportXlsx.js
2. import * as ExcelJS from 'exceljs';
3. import { saveAs } from 'file-saver';
5. //使用exceljs的getCell()根据行列坐标修改表格数据
6. //根据模板导出xlsx，tempPath为模板路径，dataList为数据，exportName为导出文件名
7. //templateExportXlsx('./static/xlsx/t1.xlsx', [{ G25: 'ggg' }, { H25: 'hhh' }], '1.xlsx')
8. export async function templateExportXlsx(tempPath, dataList, exportName) {
9.   let response = await fetch(tempPath); //读取文件
10.   let data = await response.arrayBuffer(); //转为二进制
11.   let workbook = new ExcelJS.Workbook();
12.   await workbook.xlsx.load(data); //读取buffer
13.   let worksheet = workbook.getWorksheet(1); //读取第一张表
14.   for (let i = 0; i < dataList.length; i++) {
15.     let key = Object.keys(dataList[i])[0];
16.     let val = Object.values(dataList[i])[0];
17.     // console.log(key, val);
18.     worksheet.getCell(key).value = val; //坐标定位更新数据
19.   }
20.   // worksheet.eachRow({ includeEmpty: true }, (row, rowNumber) => {
21.   //   console.log(rowNumber, row.values);
22.   // });
23.   //下载
24.   await workbook.xlsx.writeBuffer().then(async (buffer) => {
25.     let blob = new Blob([buffer], { type: 'application/octet-stream' });
26.     saveAs(blob, exportName);
27.   });
28. }

复制代码

最后下载导出的表格如下：

结语

使用过程中需要注意读取数据时的异步处理。
原文链接：https://xiblogs.top/?id=71

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！