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

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

相关推荐
昔人'22 分钟前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
缺点内向3 小时前
Java:创建、读取或更新 Excel 文档
java·excel
岁月宁静6 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者6 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~7 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge7 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再7 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴7 小时前
Lua 模块的完整入门指南
前端·lua
Sheldon一蓑烟雨任平生8 小时前
Vue3 表单输入绑定
vue.js·vue3·v-model·vue3 表单输入绑定·表单输入绑定·input和change区别·vue3 双向数据绑定
浪里行舟8 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端