ExcelJS 初学者教程：在 Vue 项目中实现表格数据导出

1. 引言

ExcelJS 是一个强大的 JavaScript 库，用于创建、读取和修改 Excel 文件。在前端开发中，常常需要将表格数据导出为 Excel 文件，ExcelJS 能很好地满足这一需求。本教程将结合 Vue 项目，详细介绍如何使用 ExcelJS 实现表格数据导出功能。

2. 环境准备

2.1 创建 Vue 项目

如果你还没有 Vue 项目，可以使用 Vue CLI 创建一个新的项目：

bash 复制代码

bash
npm install -g @vue/cli
vue create exceljs-demo
cd exceljs-demo

2.2 安装 ExcelJS

在项目根目录下，使用 npm 或 yarn 安装 ExcelJS：

csharp 复制代码

bash
npm install exceljs
# 或者
yarn add exceljs

3. 案例场景

假设我们有一个 Vue 项目，页面上有一个表格展示报关单表体数据，现在需要将这些数据导出为 Excel 文件。

4. ExcelJS 基础使用步骤

4.1 引入 ExcelJS

在需要使用 ExcelJS 的组件中引入该库：

xml 复制代码

imForm.vue

<script setup>
import ExcelJS from 'exceljs';
// ... 其他引入代码 ...
</script>

4.2 创建工作簿和工作表

在导出函数中，首先创建一个 Workbook 对象，然后添加一个工作表：

xml 复制代码

imForm.vue
<script setup>
// ... 已有代码 ...

const exportTable = async () => {
  // ... 检查数据是否为空的代码 ...

  const filename = '表体数据';
  const sheetname = '表体数据';
  // 创建一个新的工作簿
  const workbook = new ExcelJS.Workbook();
  // 在工作簿中添加一个工作表
  const worksheet = workbook.addWorksheet(sheetname);

  // ... 后续代码 ...
};

// ... 已有代码 ...
</script>

4.3 定义表头和列配置

根据表格数据的结构，定义 Excel 表格的表头和列配置：

xml 复制代码

imForm.vue

<script setup>
// ... 已有代码 ...

const columnsConfig = [
  { prop: "gNo", label: "项号" },
  { prop: "contrItem", label: getLabelByProp('contrItem') },
  // ... 其他列配置 ...
];

const exportTable = async () => {
  // ... 已有代码 ...

  const columns = [];
  columnsConfig.forEach((field) => {
    if (field.label && field.prop) {
      columns.push({
        header: typeof field.label === 'function' ? field.label() : field.label,
        key: field.prop
      });
    }
  });
  // 将列配置应用到工作表中
  worksheet.columns = columns;

  // ... 后续代码 ...
};

// ... 已有代码 ...
</script>

4.4 添加数据到工作表

将表格数据添加到工作表的行中：

xml 复制代码

imDeclarationForm.vue
Apply
<script setup>
// ... 已有代码 ...

const exportTable = async () => {
  // ... 已有代码 ...

  // 将表格数据添加到工作表中
  worksheet.addRows(tableData.value);

  // ... 后续代码 ...
};

// ... 已有代码 ...
</script>

4.5 导出 Excel 文件

将工作簿转换为二进制数据，创建 Blob 对象，然后通过创建 <a> 标签模拟点击实现文件下载：

xml 复制代码

imForm.vue

<script setup>
// ... 已有代码 ...

const exportTable = async () => {
  // ... 已有代码 ...

  try {
    // 将工作簿转换为二进制数据
    const buffer = await workbook.xlsx.writeBuffer();
    // 创建 Blob 对象
    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    // 创建临时 URL
    const url = window.URL.createObjectURL(blob);
    // 创建 <a> 标签
    const a = document.createElement('a');
    a.href = url;
    a.download = `${filename}.xlsx`;
    // 模拟点击下载
    a.click();
    // 释放临时 URL
    window.URL.revokeObjectURL(url);
    ElNotification({
      title: '成功',
      message: '表格导出成功',
      type: 'success',
    });
  } catch (error) {
    console.error('导出表格失败:', error);
    ElNotification({
      title: '失败',
      message: '表格导出失败',
      type: 'error',
    });
  }
};

// ... 已有代码 ...
</script>

4.6 添加导出按钮

在模板中添加一个按钮，绑定导出函数：

xml 复制代码

imDeclarationForm.vue
Apply
<template>
  <!-- ... 已有代码 ... -->
  <el-card>
    <el-button type="primary" @click="exportTable">导出表格</el-button>
    <el-table :data="tableData" style="width: 100%" border stripe @row-click="handleRowClick">
      <!-- ... 表格列配置 ... -->
    </el-table>
  </el-card>
  <!-- ... 已有代码 ... -->
</template>

5. 总结

通过以上步骤，我们在 Vue 项目中使用 ExcelJS 实现了表格数据导出为 Excel 文件的功能。主要步骤包括引入 ExcelJS、创建工作簿和工作表、定义表头和列配置、添加数据到工作表以及导出文件。ExcelJS 还提供了丰富的 API 用于样式设置、合并单元格等高级操作，你可以根据实际需求进一步探索。

6. 注意事项

确保在使用 ExcelJS 前已经正确安装该库。
处理异步操作时，要注意错误处理，避免出现未捕获的异常。
导出大文件时，可能会影响性能，需要考虑优化。