在现代 Web 开发中，Excel 文件的导入导出功能常常被用于报表生成、数据分析等场景。ExcelJS 是一个非常流行的 JavaScript 库，可以帮助我们在前端实现 Excel 文件的导入、导出等功能。本文将详细介绍如何在 Vue 项目中使用 ExcelJS 进行 Excel 文件的导出。

一、项目准备

首先，确保你已经有一个 Vue 项目。如果你还没有创建 Vue 项目，可以通过以下命令使用 Vue CLI 创建一个新的 Vue 项目：

vue create exceljs-demo
cd exceljs-demo

然后，在项目中安装 ExcelJS 库：

npm install exceljs

二、导入 ExcelJS

在 Vue 组件中使用 ExcelJS，我们需要先导入该库：

import ExcelJS from 'exceljs';

三、创建 Excel 文件

接下来，我们将通过 ExcelJS 创建一个新的 Excel 文件，并使用 Vue 来触发文件的生成与下载。

1. 准备数据

首先，我们需要准备一些数据，这些数据将填充到 Excel 文件中。例如，我们可以使用以下数据：

const data = [
  { name: 'Alice', age: 25, email: 'alice@example.com' },
  { name: 'Bob', age: 30, email: 'bob@example.com' },
  { name: 'Charlie', age: 35, email: 'charlie@example.com' }
];

2. 创建 Excel 文件

在 Vue 组件中，我们可以通过 ExcelJS 来创建一个新的工作簿，并将数据填充到其中。以下是一个简单的实现：

<template>
  <div>
    <button @click="exportExcel">导出 Excel</button>
  </div>
</template>

<script>
import ExcelJS from 'exceljs';

export default {
  methods: {
    exportExcel() {
      // 创建一个新的工作簿
      const workbook = new ExcelJS.Workbook();
      const worksheet = workbook.addWorksheet('Sheet 1'); // 创建一个工作表

      // 设置列标题
      worksheet.columns = [
        { header: '姓名', key: 'name', width: 20 },
        { header: '年龄', key: 'age', width: 10 },
        { header: '邮箱', key: 'email', width: 30 }
      ];

      // 准备数据并添加到工作表中
      const data = [
        { name: 'Alice', age: 25, email: 'alice@example.com' },
        { name: 'Bob', age: 30, email: 'bob@example.com' },
        { name: 'Charlie', age: 35, email: 'charlie@example.com' }
      ];

      worksheet.addRows(data); // 添加数据行

      // 创建一个 Blob 并下载文件
      workbook.xlsx.writeBuffer().then((buffer) => {
        const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = 'example.xlsx';
        link.click(); // 模拟点击下载文件
      });
    }
  }
}
</script>

解释

• ExcelJS.Workbook()：创建一个新的工作簿。
• workbook.addWorksheet('Sheet 1')：添加一个工作表。
• worksheet.columns：设置工作表的列头信息，包括每列的名称、键（对应数据中的键）以及列的宽度。
• worksheet.addRows(data)：将数据添加到工作表中。
• workbook.xlsx.writeBuffer()：将工作簿转换为一个 Buffer，可以在浏览器中直接下载。

3. 创建 Blob 并触发下载

在 ExcelJS 创建好 Excel 文件后，我们通过 Blob 对象将其转换为二进制流，然后使用 URL.createObjectURL() 创建一个 URL，该 URL 可以被用来下载 Excel 文件。

我们创建了一个 a 标签，并通过 JavaScript 触发它的 click 事件，从而模拟文件的下载。

四、样式和 UI 改进

你可以根据需求，进一步美化 UI 组件，例如添加加载动画、按钮样式等。这些都可以通过 CSS 和 Vue 的动态绑定来实现。

<template>
  <div>
    <button @click="exportExcel" class="export-button">导出 Excel</button>
  </div>
</template>

<style scoped>
.export-button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.export-button:hover {
  background-color: #45a049;
}
</style>

五、总结

在这篇教程中，我们使用 ExcelJS 库实现了在 Vue 项目中导出 Excel 文件的功能。通过创建工作簿、设置列、添加数据、生成 Blob 等步骤，我们能够轻松实现 Excel 文件的导出。

如果你需要对导出的 Excel 文件进行更复杂的操作，例如格式化单元格、合并单元格、添加图表等，ExcelJS 提供了丰富的 API，可以帮助你进一步扩展功能。