纯前端vue如何实现10万+数据分批导出excel表格到一个xlsx文件方法(含详细代码)【收藏】

在Vue.js中，你可以使用第三方库如xlsx和file-saver来实现大量数据的分批导出到Excel文件。以下是一个简化的例子，展示了如何实现这一功能：

1. 安装所需依赖：

npm install xlsx file-saver

2. 在Vue组件中使用这些库：

<template>
  <div>
    <button @click="exportExcel">导出Excel</button>
  </div>
</template>
 
<script>
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
 
export default {
  methods: {
    exportExcel() {
      // 假设你有一个大数组data，里面包含了10万条数据
      const data = new Array(100000).fill(null).map((_, index) => ({ id: index, value: 'Value ' + index }));
 
      // 分批处理数据以避免内存溢出
      const batchSize = 10000; // 每批导出10000条数据
      const batchCount = Math.ceil(data.length / batchSize);
 
      for (let batch = 0; batch < batchCount; batch++) {
        const fromIndex = batch * batchSize;
        const toIndex = Math.min(fromIndex + batchSize, data.length);
        const batchData = data.slice(fromIndex, toIndex);
 
        // 创建工作簿和工作表
        const ws = XLSX.utils.json_to_sheet(batchData);
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
 
        // 生成Excel文件并导出
        const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
        saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), `export_${batch}.xlsx`);
      }
    }
  }
};
 
// 将字符串转换为ArrayBuffer
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>

这段代码中，我们假设有一个包含10万条数据的数组data。我们将这些数据分批导出到多个Excel文件中，每个文件包含10000条记录。这种方法可以避免内存溢出，同时允许用户下载大量数据。请注意，实际应用中你可能需要根据数据的实际情况调整批次大小以优化性能和内存使用。