在開發中，我們需要常常為用戶提供更多的數據錄入方式，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 文件。

擴展思考

1. 可以考慮將模板的列和數據驗證規則配置化，使其更易于維護和修改。

2. 在導入模板時，可以對用戶填寫的數據進行校驗，確保數據的準確性和完整性。

3. 對于大數據量的模板導出，可以考慮使用分頁或流式寫入的方式，提高性能和效率。

使用手冊

exceljs/README_zh.md at 5bed18b45e824f409b08456b59b87430ded023ab · exceljs/exceljs · GitHub

API 接口示例 - 《ExcelJS 開發文檔 - 幫助手冊 - 教程》 - 極客文檔 (geekdaxue.co)