Excel文件的导入导出

技术栈：

该功能是在Vue3+Typescript中实现Excel文件的导入和导出

实现过程：

1.安装xlsx库，可以使用npm或yarn进行安装

npm install xlsx
&&
yarn add xlsx

2.在components文件夹下创建ExcelUtils.js文件，对当前功能进行封装

const importExcel = async (file: File) => {
  // 创建一个 Promise 对象，用于异步返回解析后的 Excel 数据
  return new Promise<any[]>((resolve, reject) => {
    // 创建一个 FileReader 对象，用于读取文件内容
    const reader = new FileReader();

    // 当读取完成时执行的回调函数
    reader.onload = (e) => {
      try {
        // 从 FileReader 的结果中获取文件内容的字节数组
        const data = new Uint8Array(e.target?.result as ArrayBuffer);

        // 使用 xlsx 库的 read 函数解析字节数组为工作簿对象
        const workbook: WorkBook = read(data, { type: 'array' });

        // 获取工作簿的第一个工作表名称
        const sheetName = workbook.SheetNames[0];

        // 获取第一个工作表对象
        const worksheet = workbook.Sheets[sheetName];

        // 使用 xlsx 库的 sheet_to_json 函数将工作表数据转换为 JSON 数组
        // 设置 header 为 1，表示将第一行作为属性名
        const jsonData = utils.sheet_to_json(worksheet, { header: 1 });

        // 解析成功，将解析后的数据传递给 Promise 的 resolve 函数
        resolve(jsonData);
      } catch (error) {
        // 解析失败，将错误信息传递给 Promise 的 reject 函数
        reject(error);
      }
    };

    // 将文件内容读取为 ArrayBuffer
    reader.readAsArrayBuffer(file);
  });
};

const exportExcel = (data: any[], fileName: string) => {
  // 使用 xlsx 库的 json_to_sheet 函数将 JSON 数组转换为工作表对象
  const worksheet = utils.json_to_sheet(data);

  // 创建一个新的工作簿对象
  const workbook = utils.book_new();

  // 将工作表对象添加到工作簿中，命名为 'Sheet1'
  utils.book_append_sheet(workbook, worksheet, 'Sheet1');

  // 使用 xlsx 库的 writeFile 函数将工作簿保存为 Excel 文件
  writeFile(workbook, fileName);
};

 3.在组件中进行使用

<!-- ImportExportExcel.vue -->

<template>
  <div>
    <input type="file" @change="handleFileInput">
    <button @click="handleExport">Export Excel</button>
    <table v-if="tableData.length">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ item[0] }}</td>
          <td>{{ item[1] }}</td>
          <td>{{ item[2] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="
[Something went wrong, please try again later.]