Vue与Excel的优雅组合：如何实现数据的批量处理和导出

Vue与Excel的优雅组合：如何实现数据的批量处理和导出

随着数据处理的需求越来越大，在日常开发中，我们经常需要对大量数据进行处理，而Excel是一个经典的数据处理工具，能够方便快捷地进行数据分析、过滤、排序等操作，因此与Vue框架相结合，可以更加方便地实现数据的批量处理和导出。本文将介绍如何使用Vue与Excel进行优雅的数据组合。

1. 安装依赖

首先，我们需要使用两个库来实现该功能：

// 安装 xlsx 库

npm install xlsx --save
// 安装 file-saver 库
npm install file-saver --save

2. 编写数据处理组件

我们将创建一个名为 DataProcessor 的组件，其主要目的是对数据进行批量处理并生成Excel文档。

<template>
  <div>
    <h3>数据处理</h3>
    <table>
      <thead>
        <tr>
          <th v-for="(col, i) in columns" :key="i">{{ col.title }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, j) in rows" :key="j">
          <td v-for="(col, i) in columns" :key="i">{{ row[col.key] }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="exportExcel">生成Excel</button>
  </div>
</template>
<script>
import { writeFile } from 'file-saver';
import XLSX from 'xlsx';
export default {
  props: {
    columns: Array,
    rows: Array,
  },
  methods: {
    exportExcel() {
      const header = this.columns.map(col => col.title);
      const data = this.rows.map(row => this.columns.map(col => row[col.key]));
      const worksheet = XLSX.utils.aoa_to_sheet([header, ...data]);
      const workBook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workBook, worksheet, 'Sheet1');
      const file = XLSX.write(workBook, { type: 'binary' });
      writeFile(new Blob([s2ab(file)], { type: 'application/octet-stream' }), 'example.xlsx');
    },
  },
};
// 字符串转字符流方法
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;
}
</script>

该组件接受两个属性：

columns: 用于列定义，每个列定义包括列标题和键值

rows: 用于行定义，每行数据是一个对象（键值对）

在 DataProcessor 组件中，我们对传入的数据进行了过滤并将它们渲染到了表格中。我们还添加了 一个“导出Excel” 的按钮，点击后生成基于我们的表格的 Excel 文档。

在组件外面，我们需要定义数据并将它们传递给 DataProcessor 组件：

<template>
  <div>
    <DataProcessor :columns="columns" :rows="rows" />
  </div>
</template>
<script>
import DataProcessor from './DataProcessor.vue';
export default {
  components: {
    DataProcessor,
  },
  data() {
    return {
      columns: [
        { title: '姓名', key: 'name' },
        { title: '年龄', key: 'age' },
        { title: '邮箱', key: 'email' },
      ],
      rows: [
        { name: '张三', age: 20, email: 'zhangsan@example.com' },
        { name: '李四', age: 22, email: 'lisi@example.com' },
        { name: '王五', age: 24, email: 'wangwu@example.com' },
      ],
    };
  },
};
</script>

3. 实现批量导出

除了能够将表格中的数据批量生成Excel文档，我们还需要考虑成千上万行数据的情况。 在这种情况下，用户不能下载一个包含所有行的Excel文档，而是希望将它们分批进行导出。

我们可以使用 v-for 指令对数据进行分批渲染，并通过 单击“下一页”按钮 加载下一批。 在加载新数据时，我们将更新 DataProcessor 组件的 props。 由于 Excel 导出是 CPU 密集型操作，我们可以将其放入Web Workers（Web Worker是JavaScript在独立线程中运行的一个API）。

下面是我们批量导出的代码实现：

// 修改DataProcessor组件中我们的导出按钮的代码
<button @click="startExport">导出 Excel</button>
// 给DataProcessor组件添加startExport方法
methods: {
  startExport() {
    this.currentRowIndex = 0;
    this.exportStep();
  },
  exportStep() {
    const step = 10000;
    const rows = [...this.rows].splice(this.currentRowIndex, step);
    if (rows.length === 0) return;
    this.currentRowIndex += step;
    this.exportToExcel(rows).then(() => {
      setTimeout(() => {
        this.exportStep();
      }, 0);
    });
  },
  async exportToExcel(rows) {
    const header = this.columns.map(col => col.title);
    const data = rows.map(row => this.columns.map(col => row[col.key]));
    const worksheet = XLSX.utils.aoa_to_sheet([header, ...data]);
    const workBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workBook, worksheet);
    const file = await this.xlsx_util(workBook);
    this.writeBlob(this.s2ab(file), `${this.currentRowIndex}.xlsx`);
  },
  async xlsx_util(workBook) {
    return new Promise(resolve => {
      const wopts = { bookType: 'xlsx', type: 'binary' };
      const wbout = XLSX.write(workBook, wopts);
      resolve(wbout);
    });
  },
  writeBlob(content, fileName) {
    const blob = new Blob([content], { type: 'application/octet-stream' });
    const downloadHref = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = downloadHref;
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  },
  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;
  },
},
// 当前读取的行数索引
currentRowIndex: 0,

4. 总结

本文通过 Vue 与 Excel 的组合，实现了数据的批量处理和导出。我们通过创建 DataProcessor 组件来处理数据并在Excel中生成对应的文档。为了支持成千上万行记录的批量导出，我们还使用了分页技术和Web Worker。

尽管我们已经完成了导出数据的功能，但我们还可以通过其他方法来改进它。例如，我们可以实现支持多种文件格式的导出，或更改生成的Excel文件的样式。

此外，Vue和Excel之间的组合不仅限于数据处理。我们还可以使用类似的技术栈来实现上传Excel文件并解析其中的数据。