Vue3 exceljs库实现前端导入导出Excel

Vue3 中使用 ExcelJS 实现前端导入导出 Excel

在现代 web 开发中，Excel 文件的导入和导出是非常常见的需求。尤其是在处理数据报表、统计信息等场景时，使用 Excel 格式可以大大提高用户的数据操作体验。本文将介绍如何在 Vue3 项目中使用 exceljs 库来实现前端的 Excel 导入和导出功能。

1. 环境准备

首先，你需要安装 Vue3 和 ExcelJS 库。可以通过 npm 或 yarn 进行安装。打开终端，进入你的 Vue 项目目录，运行以下命令：

npm install exceljs file-saver

或者：

yarn add exceljs file-saver

2. 导出 Excel

在 Vue 组件中，我们使用 ExcelJS 来创建并导出 Excel 文件。以下示例展示了如何生成一个简单的 Excel 文件：

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

<script>
import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';

export default {
  methods: {
    async exportExcel() {
      const workbook = new ExcelJS.Workbook();
      const worksheet = workbook.addWorksheet('我的数据');

      // 添加表头
      worksheet.columns = [
        { header: '姓名', key: 'name', width: 30 },
        { header: '年龄', key: 'age', width: 10 },
        { header: '性别', key: 'gender', width: 10 },
      ];

      // 添加数据
      worksheet.addRow({ name: '张三', age: 25, gender: '男' });
      worksheet.addRow({ name: '李四', age: 30, gender: '女' });

      // 设置文件名
      const buffer = await workbook.xlsx.writeBuffer();
      const blob = new Blob([buffer], { type: 'application/octet-stream' });
      saveAs(blob, '数据.xlsx');
    },
  },
};
</script>

上述代码中，我们创建了一个包含姓名、年龄和性别的简单 Excel 文件。在点击按钮后，exportExcel 方法会被调用，生成 Excel 文件并下载。

3. 导入 Excel

接下来，我们来实现 Excel 文件的导入功能。通常，我们通过文件输入框来选择 Excel 文件，然后读取其内容。以下示例展示了如何处理文件选择和读取：

<template>
  <div>
    <input type="file" @change="importExcel" accept=".xlsx"/>
  </div>
</template>

<script>
import ExcelJS from 'exceljs';

export default {
  methods: {
    async importExcel(event) {
      const file = event.target.files[0];
      if (!file) {
        return;
      }

      const reader = new FileReader();
      reader.onload = async (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = new ExcelJS.Workbook();
        await workbook.xlsx.load(data);

        const worksheet = workbook.worksheets[0];
        const rows = [];

        worksheet.eachRow({ includeEmpty: true }, (row, rowNumber) => {
          if (rowNumber > 1) { // 跳过标题行
            const rowData = {};
            row.eachCell({ includeEmpty: true }, (cell, colNumber) => {
              rowData[worksheet.getColumn(colNumber).header] = cell.value;
            });
            rows.push(rowData);
          }
        });

        console.log('导入的数据:', rows);
      };

      reader.readAsArrayBuffer(file);
    },
  },
};
</script>

在这个示例中，我们创建了一个文件输入框，用户可以通过它选择 Excel 文件。importExcel 方法会加载选择的文件，并使用 FileReader 读取文件内容。随后，我们利用 ExcelJS 解析 Excel 数据，将每一行的数据提取出来并存储在 rows 数组中，最后通过控制台输出导入的数据。

总结

使用 exceljs 库，结合 Vue3 的响应式特性，我们能够轻松地实现前端 Excel 的导入和导出功能。通过以上的示例代码，你可以根据自己的需求进行扩展和修改，从而在项目中实现更复杂的数据处理逻辑。希望本文能够对你有所帮助！