Vue3 exceljs库实现前端导入导出Excel

前言

需求场景

最近在开辟项目时需要批量导入和导出Excel数据，在实现这个需求时，我们既可以在前端完成数据解析和文件天生工作，也可以通过前端发起导入以及导出请求后，后端实现解析文件流解析文件内容以及天生文件并提供下载链接的功能。
相较于后端处理Excel数据而言，使用前端导入导出可以提供更高的及时性，用户可以直接在浏览器中触发导出操作，无需等待后端处理。且可以在前端完成数据天生以及数据校验处理工作，大大减轻后端服务器的压力，大幅增强用户体验。
具体的技能方案选型主要看业务场景，如果对于小型数据集、及时性需求较高的导入导出操作，优先思量前端实现。而对于大型数据集、需要业务逻辑处理、以及安全性要求高的场景，则后端处理更为合适。
技能方案

xlsx与xlsx-style组合方案：xlsx 是现在前端最常用的Excel办理方案，又叫做SheetJS，但社区版不支持修改Excel的样式，需要购买Pro版才可以，如果需要修改导出的Excel文件样式，需要联合xlsx-style库一起使用。但遗憾的是xlsx库已经两年多不更新，而xlsx-style上一个版本更是8年前发布，现在已经不再保举使用该方案。
exceljs与file-saver方案：exceljs是一款免费开源支持导入导出Excel 操作工具，并且可以实现样式的修改以及 Excel 的高级功能，是非常值得保举的一个处理 Excel 的库，file-saver可以实现保存文件到当地。本文以exceljs与file-saver操作xlsx格式文件为例先容如何具体上手使用。
exceljs先容

ExcelJS是一个用于在Node.js和浏览器中创建、读取和修改Excel文件的强大JavaScript库。它提供了丰富的功能和灵活的API，使你能够在你的应用步伐中处理和操作Excel文件。
下面是一些ExcelJS库的关键特性和功能：

• 创建和修改Excel文件：ExcelJS允许你创建新的Excel工作簿，并在其中添加工作表、行和单位格。你可以设置单位格的值、样式、数据范例以及其他属性。
  
• 读取息争析Excel文件：ExcelJS支持读取息争析现有的Excel文件。你可以将Excel文件加载到工作簿中，然后访问工作表、行和单位格的数据。
  
• 导出和保存Excel文件：ExcelJS可以将工作簿保存为Excel文件，支持多种格式，如XLSX、XLS和CSV。你可以将工作簿保存到当地文件系统或将其发送到客户端以供下载。
  
• 处理复杂的Excel功能：ExcelJS支持处理复杂的Excel功能，如公式、图表、数据验证、条件格式和保护工作表等。你可以根据需要设置和操作这些功能。
  
• 支持自定义样式和格式：ExcelJS允许你自定义单位格、行、列和工作表的样式和格式。你可以设置字体、颜色、添补、边框、对齐方式以及数字和日期格式等。
  

参考文档

npm仓库地点：https://www.npmjs.com/package/exceljs
官方中文文档地点：https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md
快速上手

安装依赖

exceljs用于Excel数据处理，file-sever用于保存到当地文件。

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

复制代码

导出Excel

让我们先从简单的数据导出开始，快速体验如何使用exceljs导出Excel文件，需要注意的是在浏览器环境中运行 JavaScript，浏览器的安全计谋通常不允许直接访问读写当地文件系统。在这种情况下，需要通过其他方式将文件转换为buffer数据，在导出Excel时使用FileSaver.js库将缓冲区数据保存到文件中。

1. <template>
2.   <el-button type="primary" @click="exportExcel">导出excel</el-button>
3. </template>
5. <script setup>
6. import ExcelJS from "exceljs";
7. import FileSaver from "file-saver";
8. // 导出excel文件
9. const exportExcel = () => {
10.   // 创建工作簿
11.   const workbook = new ExcelJS.Workbook();
12.   // 添加工作表，名为sheet1
13.   const sheet1 = workbook.addWorksheet("sheet1");
14.   // 导出数据列表
15.   const data = [
16.     {"姓名": "张三", "年龄": 18, "身高": 175, "体重": 74},
17.     {"姓名": "李四", "年龄": 22, "身高": 177, "体重": 84},
18.     {"姓名": "王五", "年龄": 53, "身高": 155, "体重": 64}
19.   ]
20.   // 获取表头所有键
21.   const headers = Object.keys(data[0])
22.   // 将标题写入第一行
23.   sheet1.addRow(headers);
24.   // 将数据写入工作表
25.   data.forEach((row) => {
26.     const values = Object.values(row)
27.     sheet1.addRow(values);
28.   });
29.   // 导出表格文件
30.   workbook.xlsx.writeBuffer().then((buffer) => {
31.     let file = new Blob([buffer], {type: "application/octet-stream"});
32.     FileSaver.saveAs(file, "ExcelJS.xlsx");
33.   }).catch(error => console.log('Error writing excel export', error))
34. }
35. </script>
37. <style scoped lang="scss">
39. </style>

复制代码

当我们点击导出excel按钮时，调用exportFile函数，完成excel文件下载，下载后的文件内容如下：

导入Excel

导入excel文件时，同样使用FileReader的readAsArrayBuffer方法，将文件转换为二进制字符串，然后从buffer中加载数据并解析。

1. <template>
2.   <input
3.       type="file"
4.       accept=".xls,.xlsx"
5.       class="upload-file"
6.       @change="importExcel($event)"/>
7. </template>
9. <script setup>
10. import ExcelJS from "exceljs";
11. // 导出excel文件
12. const importExcel = (event) => {
13.   //获取选择的文件
14.   const files = event.target.files
15.   //创建Workbook实例
16.   const workbook = new ExcelJS.Workbook();
17.   // 使用FileReader对象来读取文件内容
18.   const fileReader = new FileReader()
19.   // 二进制字符串的形式加载文件
20.   fileReader.readAsArrayBuffer(files[0])
21.   fileReader.onload = ev => {
22.     console.log(ev)
23.     // 从 buffer中加载数据解析
24.     workbook.xlsx.load(ev.target.result).then(workbook => {
25.       // 获取第一个worksheet内容
26.       const worksheet = workbook.getWorksheet(1);
27.       // 获取第一行的标题
28.       const headers = [];
29.       worksheet.getRow(1).eachCell((cell) => {
30.         headers.push(cell.value);
31.       });
32.       console.log("headers", headers)
33.       // 创建一个空的JavaScript对象数组，用于存储解析后的数据
34.       const data = [];
35.       // 遍历工作表的每一行（从第二行开始，因为第一行通常是标题行）
36.       for (let rowNumber = 2; rowNumber <= worksheet.rowCount; rowNumber++) {
37.         const rowData = {};
38.         const row = worksheet.getRow(rowNumber);
39.         // 遍历当前行的每个单元格
40.         row.eachCell((cell, colNumber) => {
41.           // 获取标题对应的键，并将当前单元格的值存储到相应的属性名中
42.           rowData[headers[colNumber - 1]] = cell.value;
43.         });
44.         // 将当前行的数据对象添加到数组中
45.         data.push(rowData);
46.       }
47.       console.log("data", data)
48.     })
49.   }
50. }
51. </script>
53. <style scoped lang="scss">
55. </style>

复制代码

上传文件后，解析内容如下所示：

进阶操作

添加数据

我们可以通过columns方法添加列标题并定义列键和宽度，设置好表头后，我们可以直接通过addRow方法，根据key值去添加每一行的数据。
参考文档：https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E5%88%97
完整代码如下：

1. <template>
2.   <el-button type="primary" @click="exportExcel">导出excel</el-button>
3. </template>
5. <script setup>
6. import ExcelJS from "exceljs";
7. import FileSaver from "file-saver";
8. // 导出excel文件
9. const exportExcel = () => {
10.   // 创建工作簿
11.   const workbook = new ExcelJS.Workbook();
12.   // 添加工作表，名为sheet1
13.   const sheet1 = workbook.addWorksheet("sheet1");
14.   // 添加表头列数据
15.   sheet1.columns = [
16.     {header: "姓名", key: "name", width: 20},
17.     {header: "年龄", key: "age", width: 10},
18.     {header: "身高", key: "height", width: 10},
19.     {header: "体重", key: "weight", width: 10},
20.   ];
21.   // 添加内容列数据
22.   sheet1.addRow({sort: 1, name: "张三", age: 18, height: 175, weight: 74});
23.   sheet1.addRow({sort: 2, name: "李四", age: 22, height: 177, weight: 88});
24.   sheet1.addRow({sort: 3, name: "王五", age: 53, height: 155, weight: 62});
25.   // 导出表格文件
26.   workbook.xlsx.writeBuffer().then((buffer) => {
27.     let file = new Blob([buffer], {type: "application/octet-stream"});
28.     FileSaver.saveAs(file, "ExcelJS.xlsx");
29.   }).catch(error => console.log('Error writing excel export', error))
30. }
32. </script>
34. <style scoped lang="scss">
36. </style>

复制代码

添加数据后导出文件效果如下：

读取数据

我们可以使用getRow方法，传入指定行参数读取行数据。
使用getColumn方法，传入键、字母、id参数读取列数据。
使用eachCell方法可以遍历每个单位格内容。
参考文档：https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E8%A1%8C
代码如下：

1. <template>
2.   <el-button type="primary" @click="exportExcel">导出excel</el-button>
3. </template>
5. <script setup>
6. import ExcelJS from "exceljs";
7. import FileSaver from "file-saver";
8. // 导出excel文件
9. const exportExcel = () => {
10.   // 创建工作簿
11.   const workbook = new ExcelJS.Workbook();
12.   // 添加工作表，名为sheet1
13.   const sheet1 = workbook.addWorksheet("sheet1");
14.   // 添加表头列数据
15.   sheet1.columns = [
16.     {header: "姓名", key: "name", width: 20},
17.     {header: "年龄", key: "age", width: 10},
18.     {header: "身高", key: "height", width: 10},
19.     {header: "体重", key: "weight", width: 10},
20.   ];
21.   // 添加内容列数据
22.   sheet1.addRow({sort: 1, name: "张三", age: 18, height: 175, weight: 74});
23.   sheet1.addRow({sort: 2, name: "李四", age: 22, height: 177, weight: 88});
24.   sheet1.addRow({sort: 3, name: "王五", age: 53, height: 155, weight: 62});
25.   // 读取行数据
26.   sheet1.getRow(1).eachCell((cell, rowIdx) => {
27.     console.log("行数据", cell.value, rowIdx);
28.   });
29.   // 读取列数据,可以通过键(name)，字母(B)和基于id(1)的列号访问单个列
30.   sheet1.getColumn("name").eachCell((cell, rowIdx) => {
31.     console.log("列数据", cell.value, rowIdx);
32.   });
33. }
35. </script>
37. <style scoped lang="scss">
39. </style>

复制代码

效果

样式

在导出excel文件时，默认没有任何样式的，为了美观我们需要添加样式，而exceljs支持修改表格样式，具体内容可参考文档https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E6%A0%B7%E5%BC%8F
例如，我们需要设置全部单位格居中对齐，并添加边框。并分别指定标题行和内容行字体大小、配景颜色、行高属性，代码如下：

1. <template>
2.   <el-button type="primary" @click="exportExcel">导出excel</el-button>
3. </template>
5. <script setup>
6. import ExcelJS from "exceljs";
7. import FileSaver from "file-saver";
8. // 导出excel文件
9. const exportExcel = () => {
10.   // 创建工作簿
11.   const workbook = new ExcelJS.Workbook();
12.   // 添加工作表，名为sheet1
13.   const sheet1 = workbook.addWorksheet("sheet1");
14.   // 导出数据列表
15.   const data = [
16.     {"姓名": "张三", "年龄": 18, "身高": 175, "体重": 74},
17.     {"姓名": "李四", "年龄": 22, "身高": 177, "体重": 84},
18.     {"姓名": "王五", "年龄": 53, "身高": 155, "体重": 64}
19.   ]
20.   // 获取表头所有键
21.   const headers = Object.keys(data[0])
22.   // 将标题写入第一行
23.   sheet1.addRow(headers);
24.   // 将数据写入工作表
25.   data.forEach((row) => {
26.     const values = Object.values(row)
27.     sheet1.addRow(values);
28.   });
29.   // 修改所有单元格样式
30.   // 遍历每一行
31.   sheet1.eachRow((row, rowNumber) => {
32.     // 遍历每个单元格
33.     row.eachCell((cell) => {
34.       // 设置边框样式
35.       cell.border = {
36.         top: {style: 'thin'},
37.         left: {style: 'thin'},
38.         bottom: {style: 'thin'},
39.         right: {style: 'thin'}
40.       };
41.       // 设置居中对齐
42.       cell.alignment = {
43.         vertical: 'middle',
44.         horizontal: 'center'
45.       };
46.     });
47.   });
48.   // 获取标题行数据
49.   const titleCell = sheet1.getRow(1);
50.   // 设置行高为30
51.   titleCell.height = 30
52.   // 设置标题行单元格样式
53.   titleCell.eachCell((cell) => {
54.     // 设置标题行背景颜色为黄色
55.     cell.fill = {
56.       type: 'pattern',
57.       pattern: 'solid',
58.       fgColor: {argb: 'FFFF00'}
59.     };
60.     // 设置标题行字体
61.     cell.font = {
62.       color: {argb: 'FF0000'}, //颜色为红色
63.       bold: true,// 字体粗体
64.       size: 18 // 设置字体大小为18
65.     };
66.   })
67.   // 获取第二行到最后一行的内容数据
68.   const bodyRows = sheet1.getRows(2, sheet1.rowCount);
69.   // 处理内容行的数据
70.   bodyRows.forEach((bodyRow) => {
71.     // 设置行高为20
72.     bodyRow.height = 20
73.     bodyRow.eachCell((cell) => {
74.       cell.font = {
75.         size: 16 // 设置内容行字体大小为16
76.       };
77.     });
78.   });
79.   // 导出表格文件
80.   workbook.xlsx.writeBuffer().then((buffer) => {
81.     let file = new Blob([buffer], {type: "application/octet-stream"});
82.     FileSaver.saveAs(file, "ExcelJS.xlsx");
83.   }).catch(error => console.log('Error writing excel export', error))
84. }
86. </script>
88. <style scoped lang="scss">
90. </style>

复制代码

导出Excel样式效果如下所示，已经成功按我们指定的样式导出了文件：

筛选

在许多的时候我们需要对表格中每一列的数据进行筛选，比如直接筛选姓名等列信息，我们可以通过 autoFilter 来添加筛选。参考文档：https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E8%87%AA%E5%8A%A8%E7%AD%9B%E9%80%89%E5%99%A8
代码如下：

1. <template>
2.   <el-button type="primary" @click="exportExcel">导出excel</el-button>
3. </template>
5. <script setup>
6. import ExcelJS from "exceljs";
7. import FileSaver from "file-saver";
8. // 导出excel文件
9. const exportExcel = () => {
10.   // 创建工作簿
11.   const workbook = new ExcelJS.Workbook();
12.   // 添加工作表，名为sheet1
13.   const sheet1 = workbook.addWorksheet("sheet1");
14.   // 导出数据列表
15.   const data = [
16.     {"姓名": "张三", "年龄": 18, "身高": 175, "体重": 74},
17.     {"姓名": "李四", "年龄": 22, "身高": 177, "体重": 84},
18.     {"姓名": "王五", "年龄": 53, "身高": 155, "体重": 64}
19.   ]
20.   // 获取表头所有键
21.   const headers = Object.keys(data[0])
22.   // 将标题写入第一行
23.   sheet1.addRow(headers);
24.   // 将数据写入工作表
25.   data.forEach((row) => {
26.     const values = Object.values(row)
27.     sheet1.addRow(values);
28.   });
29.   // 单列筛选
30.   // sheet1.autoFilter = "A1";
31.   // 多个列筛选
32.   sheet1.autoFilter = "A1:C1";
33.   // 导出表格文件
34.   workbook.xlsx.writeBuffer().then((buffer) => {
35.     let file = new Blob([buffer], {type: "application/octet-stream"});
36.     FileSaver.saveAs(file, "ExcelJS.xlsx");
37.   }).catch(error => console.log('Error writing excel export', error))
38. }
40. </script>
42. <style scoped lang="scss">
44. </style>

复制代码

导入后的效果如下，在姓名、年事、身高列添加了筛选按钮：

公式值

参考文档：https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E5%80%BC%E7%B1%BB%E5%9E%8B
我们可以直接对表格中的数据进行公式计算，比如 求和(SUM)，平均数(AVERAGE) 等。
例如我们需要计算平均值、最大值、指定公式时，代码如下：

1. <template>
2.   <el-button type="primary" @click="exportExcel">导出excel</el-button>
3. </template>
5. <script setup>
6. import ExcelJS from "exceljs";
7. import FileSaver from "file-saver";
8. // 导出excel文件
9. const exportExcel = () => {
10.   // 创建工作簿
11.   const workbook = new ExcelJS.Workbook();
12.   // 添加工作表，名为sheet1
13.   const sheet1 = workbook.addWorksheet("sheet1");
14.   // 导出数据列表
15.   const data = [
16.     {"姓名": "张三", "年龄": 18, "身高": 1.75, "体重": 74},
17.     {"姓名": "李四", "年龄": 22, "身高": 1.77, "体重": 84},
18.     {"姓名": "王五", "年龄": 53, "身高": 1.55, "体重": 64}
19.   ]
20.   // 获取表头所有键
21.   const headers = Object.keys(data[0])
22.   // 将标题写入第一行
23.   sheet1.addRow(headers);
24.   // 将数据写入工作表
25.   data.forEach((row) => {
26.     const values = Object.values(row)
27.     sheet1.addRow(values);
28.   });
29.   // 添加单元格
30.   sheet1.getCell("E1").value = "BMI指数";
31.   sheet1.getCell("F1").value = "平均身高";
32.   sheet1.getCell("G1").value = "最大体重";
33.   // 计算平均身高
34.   sheet1.getCell("F2").value = {formula: "=AVERAGE(C2:C4)"};
35.   // 计算最大体重
36.   sheet1.getCell("G2").value = {formula: "=MAX(D2:D4)"};
37.   // 计算BMI指数
38.   // 获取第5列对象
39.   const BMIRange = sheet1.getColumn(5)
40.   BMIRange.eachCell((cell) => {
41.     console.log("cell", cell)
42.     console.log(cell.row)
43.     // 从第二列开始添加计算公式
44.     if (cell.row >= 2) {
45.       sheet1.getCell("E" + cell.row).value = {formula: "D" + cell.row + "/" + "(C" + cell.row + "*" + "C" + cell.row + ")"};
46.     }
47.   })
48.   // 导出表格文件
49.   workbook.xlsx.writeBuffer().then((buffer) => {
50.     let file = new Blob([buffer], {type: "application/octet-stream"});
51.     FileSaver.saveAs(file, "ExcelJS.xlsx");
52.   }).catch(error => console.log('Error writing excel export', error))
53. }
55. </script>
57. <style scoped lang="scss">
59. </style>

复制代码

导出Excel文件效果如下，E列已经主动替换为公式计算。

合并单位格

表格的合并应该是业务需求中最频繁的功能。当然这一功能使用 xlsx 也可以实现，我们只需要使用mergeCells方法，传入合并单位格范围参数即可。
参考文档：https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E5%90%88%E5%B9%B6%E5%8D%95%E5%85%83%E6%A0%BC
具体代码实现如下所示：

1. <template>
2.   <el-button type="primary" @click="exportExcel">导出excel</el-button>
3. </template>
5. <script setup>
6. import ExcelJS from "exceljs";
7. import FileSaver from "file-saver";
8. // 导出excel文件
9. const exportExcel = () => {
10.   // 创建工作簿
11.   const workbook = new ExcelJS.Workbook();
12.   // 添加工作表，名为sheet1
13.   const sheet1 = workbook.addWorksheet("sheet1");
14.   // 导出数据列表
15.   const data = [
16.     {"姓名": "张三", "年龄": 18, "身高": 175, "体重": 74},
17.     {"姓名": "李四", "年龄": 18, "身高": '未知', "体重": '未知'},
18.     {"姓名": "王五", "年龄": 53, "身高": '未知', "体重": '未知'},
19.     {"姓名": "赵六", "年龄": 12, "身高": '未知', "体重": '未知'}
20.   ]
21.   // 获取表头所有键
22.   const headers = Object.keys(data[0])
23.   // 将标题写入第一行
24.   sheet1.addRow(headers);
25.   // 将数据写入工作表
26.   data.forEach((row) => {
27.     const values = Object.values(row)
28.     sheet1.addRow(values);
29.   });
30.   // 上下合并单元格
31.   sheet1.mergeCells("B2:B3");
32.   // 左右合并单元格
33.   sheet1.mergeCells("C3:D3");
34.   // 范围合并单元格
35.   sheet1.mergeCells("C4:D5");
36.   // 导出表格文件
37.   workbook.xlsx.writeBuffer().then((buffer) => {
38.     let file = new Blob([buffer], {type: "application/octet-stream"});
39.     FileSaver.saveAs(file, "ExcelJS.xlsx");
40.   }).catch(error => console.log('Error writing excel export', error))
41. }
43. </script>
45. <style scoped lang="scss">
47. </style>

复制代码

单位格合并后导出文件效果如下：

数据验证

有时候我们需要为某个单位格添加数据可以方便直接下拉选择指定的值，此时就需要使用数据验证功能，传入可填写的选项列表。
参考文档：https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E6%95%B0%E6%8D%AE%E9%AA%8C%E8%AF%81
例如我们对是否注册列添加数据验证，可填值为"是、否、未知"，具体代码如下：

1. <template>
2.   <el-button type="primary" @click="exportExcel">导出excel</el-button>
3. </template>
5. <script setup>
6. import ExcelJS from "exceljs";
7. import FileSaver from "file-saver";
8. // 导出excel文件
9. const exportExcel = () => {
10.   // 创建工作簿
11.   const workbook = new ExcelJS.Workbook();
12.   // 添加工作表，名为sheet1
13.   const sheet1 = workbook.addWorksheet("sheet1");
14.   // 导出数据列表
15.   const data = [
16.     {"姓名": "张三", "年龄": 18, "身高": 1.75, "体重": 74, "是否注册": ''},
17.     {"姓名": "李四", "年龄": 22, "身高": 1.77, "体重": 84, "是否注册": ''},
18.     {"姓名": "王五", "年龄": 53, "身高": 1.55, "体重": 64, "是否注册": ''}
19.   ]
20.   // 获取表头所有键
21.   const headers = Object.keys(data[0])
22.   // 将标题写入第一行
23.   sheet1.addRow(headers);
24.   // 将数据写入工作表
25.   data.forEach((row) => {
26.     const values = Object.values(row)
27.     sheet1.addRow(values);
28.   });
29.   // 获取第5列对象
30.   const VerificationRange = sheet1.getColumn(5)
31.   VerificationRange.eachCell((cell) => {
32.     // 从第二列开始添加数据验证规则
33.     if (cell.row >= 2) {
34.       sheet1.getCell("E" + cell.row).dataValidation = {
35.         type: "list",
36.         allowBlank: true,
37.         formulae: ['"是,否,未知"']
38.       };
39.     }
40.   })
41.   // 导出表格文件
42.   workbook.xlsx.writeBuffer().then((buffer) => {
43.     let file = new Blob([buffer], {type: "application/octet-stream"});
44.     FileSaver.saveAs(file, "ExcelJS.xlsx");
45.   }).catch(error => console.log('Error writing excel export', error))
46. }
48. </script>
50. <style scoped lang="scss">
52. </style>

复制代码

导出的excel文件效果如下：

条件格式化

我们可以为指定单位格添加条件格式，对满足条件的单位格设置指定的样式。
参考文档：https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E6%9D%A1%E4%BB%B6%E6%A0%BC%E5%BC%8F%E5%8C%96
例如为年事大于18岁单位格进行赤色标注，代码如下：

1. <template>
2.   <el-button type="primary" @click="exportExcel">导出excel</el-button>
3. </template>
5. <script setup>
6. import ExcelJS from "exceljs";
7. import FileSaver from "file-saver";
8. // 导出excel文件
9. const exportExcel = () => {
10.   // 创建工作簿
11.   const workbook = new ExcelJS.Workbook();
12.   // 添加工作表，名为sheet1
13.   const sheet1 = workbook.addWorksheet("sheet1");
14.   // 导出数据列表
15.   const data = [
16.     {"姓名": "张三", "年龄": 18, "身高": 1.75, "体重": 74},
17.     {"姓名": "李四", "年龄": 22, "身高": 1.77, "体重": 84},
18.     {"姓名": "王五", "年龄": 53, "身高": 1.55, "体重": 64}
19.   ]
20.   // 获取表头所有键
21.   const headers = Object.keys(data[0])
22.   // 将标题写入第一行
23.   sheet1.addRow(headers);
24.   // 将数据写入工作表
25.   data.forEach((row) => {
26.     const values = Object.values(row)
27.     sheet1.addRow(values);
28.   });
29.   // 年龄大于18岁红色标注
30.   sheet1.addConditionalFormatting({
31.     ref: "B2:B4",
32.     rules: [
33.       {
34.         type: "cellIs",
35.         operator: "greaterThan",
36.         priority: 1,
37.         formulae: [18],
38.         style: {
39.           fill: {
40.             type: "pattern",
41.             pattern: "solid",
42.             bgColor: { argb: "FFFFC0CB" },
43.           },
44.         },
45.       },
46.     ],
47.   });
48.   // 导出表格文件
49.   workbook.xlsx.writeBuffer().then((buffer) => {
50.     let file = new Blob([buffer], {type: "application/octet-stream"});
51.     FileSaver.saveAs(file, "ExcelJS.xlsx");
52.   }).catch(error => console.log('Error writing excel export', error))
53. }
55. </script>
57. <style scoped lang="scss">
59. </style>

复制代码

导出后的文件效果如下：

封装exceljs

封装导入导出函数

为了进步项目代码的复用性，通常会将excel导入导出功能封装到单独的函数中方便调用，封装后的函数如下：

1. import ExcelJS from "exceljs";
2. import FileSaver from "file-saver";
3. import {timeFile} from "@/utils/timeFormat";
4. // 导出excel文件
5. export function exportFile(export_data, filename) {
6.     // 创建工作簿
7.     const workbook = new ExcelJS.Workbook();
8.     // 添加工作表，名为sheet1
9.     const sheet1 = workbook.addWorksheet("sheet1");
10.     // 获取表头所有键
11.     const headers = Object.keys(export_data[0])
12.     // 将标题写入第一行
13.     sheet1.addRow(headers);
14.     // 将数据写入工作表
15.     export_data.forEach((row) => {
16.         const values = Object.values(row)
17.         sheet1.addRow(values);
18.     });
19.     // 设置默认宽高属性
20.     sheet1.properties.defaultColWidth = 20
21.     sheet1.properties.defaultRowHeight = 20
22.     // 修改所有单元格样式
23.     // 遍历每一行
24.     sheet1.eachRow((row, rowNumber) => {
25.         // 遍历每个单元格
26.         row.eachCell((cell) => {
27.             // 设置边框样式
28.             cell.border = {
29.                 top: {style: 'thin'},
30.                 left: {style: 'thin'},
31.                 bottom: {style: 'thin'},
32.                 right: {style: 'thin'}
33.             };
34.             // 设置居中对齐
35.             cell.alignment = {
36.                 vertical: 'middle',
37.                 horizontal: 'center'
38.             };
39.         });
40.     });
41.     // 获取标题行数据
42.     const titleCell = sheet1.getRow(1);
43.     // 设置标题行单元格样式
44.     titleCell.eachCell((cell) => {
45.         // 设置标题行背景颜色
46.         cell.fill = {
47.             type: 'pattern',
48.             pattern: 'solid',
49.             fgColor: {argb: '3498db'}
50.         };
51.         // 设置标题行字体
52.         cell.font = {
53.             bold: true,// 字体粗体
54.         };
55.     })
56.     // 导出表格文件
57.     workbook.xlsx.writeBuffer().then((buffer) => {
58.         let file = new Blob([buffer], {type: "application/octet-stream"});
59.         FileSaver.saveAs(file, filename + timeFile() + ".xlsx");
60.     }).catch(error => console.log('Error writing excel export', error))
61. }
63. // 导入excel文件
64. export function importFile(content) {
65.     return new Promise((resolve, reject) => {
66.         // 创建一个空的JavaScript对象数组，用于存储解析后的数据
67.         const data = [];
68.         //创建Workbook实例
69.         const workbook = new ExcelJS.Workbook();
70.         workbook.xlsx.load(content).then(workbook => {
71.             // 获取第一个worksheet内容
72.             const worksheet = workbook.getWorksheet(1);
73.             // 获取第一行的标题
74.             const headers = [];
75.             worksheet.getRow(1).eachCell((cell) => {
76.                 headers.push(cell.value);
77.             });
78.             // console.log("headers", headers)
79.             // 遍历工作表的每一行（从第二行开始，因为第一行通常是标题行）
80.             for (let rowNumber = 2; rowNumber <= worksheet.rowCount; rowNumber++) {
81.                 const rowData = {};
82.                 const row = worksheet.getRow(rowNumber);
83.                 // 遍历当前行的每个单元格
84.                 row.eachCell((cell, colNumber) => {
85.                     // 获取标题对应的键，并将当前单元格的值存储到相应的属性名中
86.                     rowData[headers[colNumber - 1]] = cell.value;
87.                 });
88.                 // 将当前行的数据对象添加到数组中
89.                 data.push(rowData);
90.             }
91.             // console.log("data", data)
92.             resolve(data);
93.         }).catch(error => {
94.             reject(error);
95.         });
96.     })
97. }

复制代码

vue组件调用

以element plus为例，调用函数完成Excel文件导入与导出，代码如下：

1. <template>
2.   <el-button type="primary" @click="exportExcel">导出excel</el-button>
3.   <el-button type="success" @click="importExcel">导入excel</el-button>
4.   <p>导入数据预览</p>
5.   {{ uploadData}}
6.   <el-dialog
7.       v-model="uploadDialogVisible"
8.       title="批量添加数据"
9.       width="40%"
10.   >
11.     <el-form label-width="120px">
12.       <el-form-item label="模板下载：">
13.         <el-button type="info" @click="downloadTemplate">
14.           <el-icon>
15.             <Download/>
16.           </el-icon>
17.           点击下载
18.         </el-button>
19.       </el-form-item>
20.       <el-form-item label="文件上传：">
21.         <el-upload drag accept=".xls,.xlsx" :auto-upload="false" :on-change="handleChange">
22.           <el-icon class="el-icon--upload">
23.             <upload-filled/>
24.           </el-icon>
25.           <div class="el-upload__text">
26.             将文件拖到此处，或<em>点击上传</em>
27.           </div>
28.           <template #tip>
29.             <div class="el-upload__tip">
30.               请上传.xls,.xlsx格式文件，文件最大为500kb
31.             </div>
32.           </template>
33.         </el-upload>
34.       </el-form-item>
35.     </el-form>
36.     <template #footer>
37.       <span class="dialog-footer">
38.         <el-button @click="uploadDialogVisible = false">取消</el-button>
39.         <el-button type="primary" @click="submitUpload">
40.           导入
41.         </el-button>
42.       </span>
43.     </template>
44.   </el-dialog>
45. </template>
47. <script setup>
48. import {ref} from "vue";
49. import {ElMessage} from "element-plus";
50. import {Download, UploadFilled} from "@element-plus/icons-vue"
51. import {getDemo} from "@/api/home";
52. import {timeFormatConversion} from "@/utils/timeFormat";
53. import {exportFile, importFile} from "@/utils/excel";
54. // 表格字段配置
55. const fieldConfig = ref([
56.   {
57.     'label': 'ID', // 标签
58.     'model': 'id',// 字段名
59.     'is_export': true,// 是否导出该字段
60.   },
61.   {
62.     'label': '用户名', // 标签
63.     'model': 'username',// 字段名
64.     'is_export': true, // 是否导出该字段
65.   },
66.   {
67.     'label': '省份', // 标签
68.     'model': 'province',// 字段名
69.     'is_export': true // 是否导出该字段
70.   },
71.   {
72.     'label': '性别', // 标签
73.     'model': 'sex_name',// 字段名
74.     'is_export': true // 是否导出该字段
75.   },
76.   {
77.     'label': '生日', // 标签
78.     'model': 'birthday',// 字段名
79.     'is_export': true, // 是否导出该字段
80.   },
81.   {
82.     'label': '身高(cm)', // 标签
83.     'model': 'height',// 字段名
84.     'is_export': true, // 是否导出该字段
85.   },
86.   {
87.     'label': '体重(kg)', // 标签
88.     'model': 'weight',// 字段名
89.     'is_export': true,// 是否导出该字段
90.   },
91.   {
92.     'label': '注册时间', // 标签
93.     'model': 'created_time',// 字段名
94.     'is_export': true, // 是否导出该字段
95.   },
96.   {
97.     'label': '个人介绍', // 标签
98.     'model': 'introduction',// 字段名
99.     'is_export': true,// 是否导出该字段
100.   }
101. ])
102. // 导出Excel事件
103. const exportExcel = () => {
104.   ElMessage({
105.     message: '开始导出数据，请稍候！',
106.     type: 'success',
107.   })
108.   // 导出数据查询参数
109.   const printParams = {
110.     'size': 1000,
111.     'page': 1,
112.   }
113.   // 获取需要导出的字段配置
114.   const export_fields = fieldConfig.value
115.       .filter(obj => obj['is_export'])
116.       .map(({label, model}) => ({[model]: label}))
117.   // 处理数据结构
118.   getDemo(printParams).then((response) => {
119.     // console.log(response.results)
120.     const export_data = response.results.map(obj => {
121.       const newObj = {};
122.       export_fields.forEach(field => {
123.         const [key, value] = Object.entries(field)[0];
124.         if (key === 'created_time') {
125.           newObj[value] = timeFormatConversion((obj[key]), 'YYYY-MM-DD HH:mm:ss');
126.         } else {
127.           newObj[value] = obj[key];
128.         }
129.       });
130.       return newObj;
131.     });
132.     let filename = '示例用户'
133.     exportFile(export_data, filename);
134.   }).catch(response => {
135.     //发生错误时执行的代码
136.     console.log(response)
137.     ElMessage.error('获取列表数据失败！')
138.   });
139. }
140. // 导入excel弹窗是否显示
141. const uploadDialogVisible = ref(false)
142. // 点击导入excel按钮事件
143. const importExcel = () => {
144.   uploadDialogVisible.value = true
145. }
146. // 下载模板文件
147. const downloadTemplate = () => {
148.   window.open('https://api.cuiliangblog.cn/static/demo-template.xlsx')
149. }
150. // 文件数据
151. const uploadData=ref([])
152. // 文件上传事件
153. const handleChange = (file) => {
154.   const reader = new FileReader();
155.   reader.onload = () => {
156.     const content = reader.result;
157.     importFile(content).then((data) => {
158.       console.log(data)
159.       uploadData.value = data
160.     }).catch(response => {
161.       //发生错误时执行的代码
162.       console.log(response)
163.       ElMessage.error('获取列表数据失败！')
164.     });
165.   };
166.   reader.readAsBinaryString(file.raw);
167. };
168. // 点击导入excel提交数据事件
169. const submitUpload = () => {
170.   uploadDialogVisible.value =false
171. }
172. </script>
174. <style scoped lang="scss">
176. </style>

复制代码

页面效果

封装后的页面效果如下，至此，一个简单的vue前端实现Excel文件导入导出功能便开辟完成了。

完整代码

gitee：https://gitee.com/cuiliang0302/vue3_vite_element-plus
github：https://github.com/cuiliang0302/vue3-vite-template
检察更多

微信公众号

微信公众号同步更新，欢迎关注微信公众号《崔亮的博客》第一时间获取最近文章。
博客网站

崔亮的博客-专注devops主动化运维，流传优秀it运维技能文章。更多原创运维开辟相关文章，欢迎访问https://www.cuiliangblog.cn

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。