当前位置：首页 > news >正文

基于 Vue3 与 exceljs 实现自定义导出 Excel 模板

news 来源：原创 2025/6/8 4:35:35

在开发中，我们需要常常为用户提供更多的数据录入方式，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>