如何使用xlsx和file-saver插件实现导入导出

首先，安装xlsx和file-saver插件在组件中引入

import * as XLSX from 'xlsx';
import FileSaver from 'file-saver';
<div>
    <!-- 导入表格 -->
    <label for="import-excel">导入表格：</label>
    <input id="import-excel" type="file" accept=".xlsx, .xls" @change="handleImport">
    <br><br>
    <!-- 导出表格 -->
    <el-button type="primary" @click="handleExport">导出表格</el-button>
    <br><br>
    <!-- 表格展示 -->
    <el-table :data="tableData" :columns="tableColumns">
      <el-table-column prop="姓名" label="姓名" />
          <el-table-column prop="年龄" label="年龄" sortable />
          <el-table-column prop="爱好" label="爱好" sortable />
    
    </el-table>
  </div>

导出的方法

handleExport() {

      const worksheet = XLSX.utils.json_to_sheet(this.tableData);

      const workbook = XLSX.utils.book_new();

      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

      const buffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });

      const blob = new Blob([buffer], { type: 'application/octet-stream' });

      FileSaver.saveAs(blob, 'table.xlsx');

    },

注释：

1. const worksheet = XLSX.utils.json_to_sheet(this.tableData);

   • 首先，使用 XLSX.utils.json_to_sheet 方法将 Vue 组件中的 tableData 数组转换为一个 Excel 表格的工作表对象 worksheet。tableData 应该是一个包含表格数据的数组。

2. const workbook = XLSX.utils.book_new();

   • 创建一个新的 Excel 工作簿对象 workbook，用于存储所有的工作表。

3. XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

   • 将之前创建的工作表 worksheet 添加到工作簿 workbook 中，并指定工作表的名称为 'Sheet1'。

4. const buffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });

   • 使用 XLSX.write 方法将工作簿对象 workbook 写入一个 Excel 文件的二进制数据。在这里，指定了输出文件类型为 'xlsx'，并且指定输出的数据类型为数组。

5. const blob = new Blob([buffer], { type: 'application/octet-stream' });

   • 创建一个包含 Excel 文件二进制数据的 Blob 对象 blob，并指定 MIME 类型为 'application/octet-stream'，表示这是一个二进制流文件。

6. FileSaver.saveAs(blob, 'table.xlsx');

   最后一步是使用 FileSaver.saveAs 方法将生成的 Blob 对象保存为一个名为 'table.xlsx' 的 Excel 文件。这样用户就可以通过下载或者保存操作获取这个生成的 Excel 文件。

导入的方法

handleImport(event) {
      const file = event.target.files[0];
      if (!file) return;
      const reader = new FileReader();
      reader.readAsBinaryString(file);
      reader.onload = (e) => {
        const data = e.target.result;
        const workbook = XLSX.read(data, { type: 'binary' });
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];
        const json = XLSX.utils.sheet_to_json(worksheet, { blankrows: false });
        console.log(sheetName, 111)
        this.renderTable(json);
      };
      reader.onerror = (error) => console.error(error);
    },

注释：

1. 这个 handleImport 方法用于处理用户上传文件的事件，并实现从上传的 Excel 文件中读取数据，最终将数据以 JSON 格式展示在表格中或进行其他处理。以下是该方法的主要思路总结：

   1. 用户触发上传文件事件，通过 event.target.files[0] 获取用户上传的文件对象。

   2. 检查是否成功获取到文件，若未获取到则终止后续操作。

   3. 创建 FileReader 对象，用于读取用户上传文件的内容。

   4. 调用 readAsBinaryString 方法开始读取文件内容，以二进制字符串形式进行读取。

   5. 当文件读取完成后，通过 reader.onload 回调函数处理读取到的文件内容。

   6. 获取读取到的文件内容，即 Excel 文件的二进制字符串数据。

   7. 使用 XLSX.read 方法解析二进制字符串数据为 Excel 工作簿对象，并指定数据类型为 'binary'。

   8. 获取工作簿中第一个工作表的名称，并根据名称获取对应的工作表对象。

   9. 将工作表对象转换为 JSON 格式的数据，不包含空行。

   10. 打印工作表名称以便调试和确认导入的数据准确性。

   11. 调用 renderTable 方法，将转换后的 JSON 数据传递给该方法，用于在表格中展示或进行其他处理。

渲染

renderTable(data) {
      const columns = Object.keys(data[0]).map((key, index) => ({
        label: `Column ${index + 1}`,
        prop: key,
      }));
      const tableData = data;
      this.tableColumns = columns;
      this.tableData = tableData;
      console.log(this.tableColumns, this.tableData);
    }

注释：

1. 通过 Object.keys(data[0]) 获取传入数据的第一行键（列名），然后使用 map 方法遍历生成一个新的数组 columns，其中每个元素是一个对象，包含两个属性：

   • label: 每列的显示标签，格式为 Column {index + 1}，从 1 开始递增。

   • prop: 对应数据中的键，用于在表格中显示对应列的数据。

2. 将传入的数据赋值给变量 tableData，准备用于表格展示。

3. 将处理后的列信息赋值给组件的 tableColumns 属性，以便在表格中显示列名和设置列的属性。

4. 将处理后的数据赋值给组件的 tableData 属性，用于在表格中显示数据内容。

5. 通过 console.log 打印处理后的列信息和数据内容，以便调试和确认展示在表格中的数据是否正确。