在开发中，我们需要常常为用户提供更多的数据录入方式，Excel 模板导出与导入是一个常见的功能点。本文将介绍如何使用 Vue3、exceljs 和 file-saver 实现一个自定义导出 Excel 模板，并在特定列添加下拉框选择的数据验证功能。
技术选型
exceljs ：一个功能强大的库，用于创建、操作和读取 Excel 文件。
file-saver ：用于保存文件，将生成的 Excel 文件保存到本地。
实现步骤
项目依赖安装
安装 exceljs
npm install exceljs- 安装 file-saver
npm install file-saver
代码实现
<template>
<div class="addBatchTask-func">
<div class="title">
<h2>excel表格模板下载demo</h2>
</div>
<div class="but">
<a-button @click="exportExcel" type="primary"> 导出模板 </-buttona>
</div>
</div>
</template>
<script setup>
import * as ExcelJS from "exceljs";
import FileSaver from "file-saver";
import { ref } from "vue";
// 下载模板
const exportExcel = async () => {
const excelData = [];
const columns = [
{ header: "姓名", key: "name", width: 10 },
{ header: "年龄", key: "age", width: 10 },
{ header: "性别", key: "sex", width: 10 },
{ header: "家庭住址", key: "address", width: 10 },
];
const cell = [
{
key: "B",
formulae: ['"男,女"'],
},
];
console.log(cell, "cell");
const _workbook = new ExcelJS.Workbook();
const _sheet1 = _workbook.addWorksheet("sheet1");
_sheet1.columns = columns;
excelData.forEach((item) => {
_sheet1.addRow(item);
});
for (let i = 2; i <= 999; i++) {
cell.forEach((item) => {
_sheet1.getCell(`${item.key}${i}`).dataValidation = {
type: "list",
allowBlank: true,
formulae: item.formulae,
};
});
}
await _workbook.xlsx.writeBuffer().then((buffer) => {
let _file = new Blob([buffer], {
type: "application/octet-stream",
});
FileSaver.saveAs(_file, "Excel_Base.xlsx");
});
};
</script>
<style lang="less" scoped>
</style>代码解析
使用 exceljs 创建一个工作簿和工作表，设置表头和列宽。通过循环为特定列的每个单元格添加下拉框数据验证。最后，将工作簿写入缓冲区，并使用 file-saver 将其保存为 Excel 文件。
扩展思考
可以考虑将模板的列和数据验证规则配置化，使其更易于维护和修改。
在导入模板时，可以对用户填写的数据进行校验，确保数据的准确性和完整性。
对于大数据量的模板导出，可以考虑使用分页或流式写入的方式，提高性能和效率。
使用手册
exceljs/README_zh.md at 5bed18b45e824f409b08456b59b87430ded023ab · exceljs/exceljs · GitHub