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文件并解析其中的数据。