使用ExcelJS实现excel的前端导入导出功能(Vue3+TS)

在现代的Web应用开发中，处理Excel文件的功能越来越受到重视。通过文件导入导出，用户可以方便地处理和分析数据。本文将介绍如何利用ExcelJS库实现Excel文件的前端导入导出功能，并结合Vue3和TypeScript进行示例。

环境准备

首先，我们需要安装ExcelJS库。可以通过npm或yarn进行安装：

npm install exceljs

或

yarn add exceljs

接下来确保你的项目中已经配置了TypeScript和Vue3的环境。

项目结构

为了简单起见，我们可以创建一个简单的Vue组件，这里我们命名为ExcelHandler.vue。在该组件中，我们将实现Excel文件的导入和导出功能。

ExcelHandler.vue

以下是ExcelHandler.vue的代码：

<template>
  <div>
    <h1>Excel 导入导出示例</h1>
    <input type="file" @change="handleFileUpload" accept=".xlsx" />
    <button @click="exportToExcel">导出为 Excel</button>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(person, index) in people" :key="index">
          <td>{{ person.name }}</td>
          <td>{{ person.age }}</td>
          <td>{{ person.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import * as ExcelJS from 'exceljs';

export default defineComponent({
  name: 'ExcelHandler',
  setup() {
    const people = ref<Array<{ name: string, age: number, gender: string }>>([]);

    // 处理文件上传
    const handleFileUpload = async (event: Event) => {
      const target = event.target as HTMLInputElement;
      if (target.files && target.files.length > 0) {
        const file = target.files[0];
        const data = await file.arrayBuffer();
        const workbook = new ExcelJS.Workbook();
        await workbook.xlsx.load(data);
        const worksheet = workbook.worksheets[0];

        // 将Excel数据转存到people
        people.value = [];
        worksheet.eachRow({ includeEmpty: true }, (row, rowNumber) => {
          if (rowNumber > 1) { // 跳过表头
            const [name, age, gender] = row.values as any[];
            people.value.push({
              name: name,
              age: age,
              gender: gender,
            });
          }
        });
      }
    };

    // 导出为Excel
    const exportToExcel = async () => {
      const workbook = new ExcelJS.Workbook();
      const worksheet = workbook.addWorksheet('人员信息');

      // 添加表头
      worksheet.addRow(['姓名', '年龄', '性别']);
      // 添加数据行
      people.value.forEach(person => {
        worksheet.addRow([person.name, person.age, person.gender]);
      });

      // 设置文件名并触发下载
      const buffer = await workbook.xlsx.writeBuffer();
      const blob = new Blob([buffer], { type: 'application/octet-stream' });
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = '人员信息.xlsx';
      link.click();
    };

    return {
      people,
      handleFileUpload,
      exportToExcel
    };
  }
});
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
</style>

代码解析

1. 导入和初始化：在组件中，我们导入了ExcelJS库，并设置了一个people数组来保存从Excel中读取的数据。

2. 文件上传处理：在handleFileUpload方法中，我们首先获取到用户上传的Excel文件，并使用ExcelJS的workbook.xlsx.load方法读取文件数据。接着，遍历工作表的每一行，将数据存储到people数组中。

3. 导出为Excel：在exportToExcel方法中，我们创建一个新的工作表，将表头和数据行逐一添加到工作表中。最后，使用Blob对象创建一个下载链接，触发用户下载生成的Excel文件。

4. 样式：通过简单的样式使得表格可读性更强。

总结

通过以上步骤，我们可以成功实现Excel文件的导入和导出功能。这种功能在数据处理、报表生成等场景中非常有用。通过使用ExcelJS库，结合Vue3和TypeScript，我们在前端轻松构建了这样的功能，为用户提供了友好的体验。希望这篇文章对您有所帮助！