vue3导入excel的方法

在Vue 3中引入Excel文件通常涉及到前端处理文件上传以及解析CSV或XLSX数据。这里推荐使用一些成熟的第三方库，例如`vue-excel-importer`或者`xlsx`.

首先，你需要安装相应的库：

npm install axios file-saver vue-xlsx --save
# 或者
yarn add axios file-saver vue-xlsx

然后，在Vue组件中，你可以这样做：

1. 导入所需的模块：

import { AxiosResponse } from 'axios';
import FileSaver from 'file-saver';
import XLSX from 'xlsx';

2. 使用`axios`发送POST请求并接收Excel文件：

export const importExcel = async (file: File) => {
  try {
    const formData = new FormData();
    formData.append('file', file);

    const response: AxiosResponse<Buffer> = await axios.post('/api/import', formData, {
      headers: {'Content-Type': 'multipart/form-data'},
    });

    // 下面这部分是将二进制数据转换为XLSX对象
    const workbook = XLSX.read(response.data, {type: 'binary'});
    const sheetNameList = XLSX.utils.sheet_names(workbook);
    
    // 根据需求处理数据...
  } catch (error) {
    console.error('Import Excel error:', error);
  }
};

3. 解析文件内容，并可能导出到新的表格或者操作数据。

4. 将导出的数据保存到本地：

const exportToCSV = (data: any[]) => {
  const excelWorksheet = XLSX.utils.aoa_to_sheet(data);
  const excelBook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(excelBook, excelWorksheet, 'Sheet1');

  FileSaver.saveAs(
    XLSX.writeFile(excelBook, 'output.xlsx'),
    'output.xlsx',
    { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' },
  );
};

// 调用示例
importExcel(file).then(() => {
  // 数据处理完成后导出为CSV
  exportToCSV(yourProcessedData);
});