vue excel 导入导出

Vue 中可以使用第三方库 `xlsx` 来实现 Excel 导入导出的功能。

首先，需要在项目中安装 `xlsx`：

npm install xlsx --save

然后，在需要使用 Excel 导入导出功能的组件中，引入 `xlsx`：

import XLSX from 'xlsx';

接下来，我们可以定义两个函数，一个用于导入 Excel 文件，一个用于导出 Excel 文件。

Excel 文件导入函数如下：

methods: {
  onFileChange(e) {
    /* 获取上传的文件 */
    const files = e.target.files;
    if (files.length <= 0) {
      return;
    }
    /* 通过 fileReader 对象读取文件数据 */
    const fileReader = new FileReader();
    fileReader.onload = (ev) => {
      try {
        const data = ev.target.result;
        /* 通过 XLSX 读取文件数据 */
        const workbook = XLSX.read(data, { type: 'binary' });
        /* 获取第一个工作表的数据 */
        const worksheet = workbook.Sheets[workbook.SheetNames[0]];
        /* 将数据转换为 JSON 格式 */
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { raw: true });
        console.log(jsonData);
      } catch (e) {
        console.error(e);
      }
    };
    fileReader.readAsBinaryString(files[0]);
  }
}

该函数通过 `FileReader` 对象读取 Excel 文件数据，然后通过 `XLSX` 库解析文件数据，将其转换为 JSON 格式，并输出到控制台中。

Excel 文件导出函数如下：

methods: {
  exportExcel() {
    /* 定义 Excel 文件数据 */
    const data = [
      ['name', 'age', 'gender'],
      ['Tom', 18, 'male'],
      ['Jerry', 20, 'female'],
      ['Lucy', 22, 'female']
    ];
    /* 创建 Workbook 对象 */
    const workbook = XLSX.utils.book_new();
    /* 创建 Worksheet 对象 */
    const worksheet = XLSX.utils.aoa_to_sheet(data);
    /* 将 Worksheet 添加到 Workbook 中 */
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
    /* 将 Workbook 转换为二进制数据 */
    const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' });
    /* 创建 Blob 对象 */
    const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
    /* 下载文件 */
    const fileName = 'data.xlsx';
    if (navigator.msSaveBlob) {
      navigator.msSaveBlob(blob, fileName);
    } else {
      const link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = fileName;
      link.click();
      window.URL.revokeObjectURL(link.href);
    }
  }
}

该函数定义了一个数据数组，然后通过 `XLSX` 库将其转换为 Excel 文件数据，最后将文件数据通过 Blob 对象下载到本地。

需要注意的是，该函数中使用了一个 `s2ab` 函数，该函数用于将字符串转换为二进制数组。该函数的实现如下：

function s2ab(s) {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i < s.length; i++) {
    view[i] = s.charCodeAt(i) & 0xFF;
  }
  return buf;
}

这样，我们就可以在 Vue 中实现 Excel 导入导出的功能了。