在 Vue 3 项目中使用 `exceljs` 库来读取 `.xlsx` 文件

在 Vue 3 项目中使用 exceljs 库来读取 .xlsx 文件，你需要遵循以下步骤：

1. 安装依赖

首先，你需要安装 exceljs 和 file-saver（用于保存文件，如果你也需要写入功能的话）。你可以通过 npm 或 yarn 来安装这些包。

npm install exceljs file-saver

或者

yarn add exceljs file-saver

2. 导入 ExcelJS

在你打算使用 exceljs 的组件或服务中导入它。

import { Workbook } from 'exceljs';

3. 创建一个方法来读取 xlsx 文件

接下来，创建一个方法来处理文件的读取。你可以使用 HTML 的 <input> 元素来选择文件，并使用 JavaScript 的 FileReader API 来读取文件内容。

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

<script>
import { ref } from 'vue';
import { Workbook } from 'exceljs';

export default {
  setup() {
    const onFileChange = async (event) => {
      const file = event.target.files[0];
      if (file) {
        const workbook = new Workbook();
        await workbook.xlsx.load(file);
        // 现在你可以访问 workBook 中的数据了
        console.log(workbook);
        // 例如获取第一个工作表的所有行
        const worksheet = workbook.getWorksheet(1);
        worksheet.eachRow((row, rowNumber) => {
          console.log('Row ' + rowNumber + ' = ' + JSON.stringify(row.values));
        });
      }
    };

    return {
      onFileChange,
    };
  },
};
</script>

4. 处理数据

一旦你有了 workbook 对象，你就可以遍历工作簿中的所有工作表、行和单元格，根据你的需求进行操作。上面的例子展示了如何打印每一行的值到控制台。

5. 错误处理

不要忘记添加适当的错误处理代码，以应对可能发生的任何异常情况，比如文件格式不正确或者文件损坏等。

try {
  await workbook.xlsx.load(file);
} catch (error) {
  console.error('Failed to load the file:', error);
}

6. 使用 Web Worker (可选)

如果要处理非常大的 Excel 文件，考虑使用 Web Worker 来避免阻塞主线程，这可以提升用户体验。你可以将读取和解析文件的逻辑放在 Web Worker 中执行。

请确保根据实际项目的需要调整上述代码。如果你有更具体的需求或遇到问题，请提供更多的信息以便我能提供更详细的帮助。