前端大数据导出优化技巧之如何解决Chrome内存崩溃

async function batchExport(totalRecords, batchSize = 5000) {
  let allData = [];
  for (let start = 0; start < totalRecords; start += batchSize) {
    const params = { start, length: batchSize };
    const { data } = await api.getData(params); // 分页请求
    allData = [...allData, ...data];
    console.log(`已加载 ${start + batchSize}/${totalRecords} 条数据`);
  }
  exportToExcel(allData); // 使用 xlsx.js 导出
}

// 示例调用
batchExport(50000); // 导出 5 万条数据

const worker = new Worker('excel-worker.js');
worker.postMessage({ data: largeData });
worker.onmessage = (e) => {
  const blob = e.data;
  saveAs(blob, 'data.xlsx'); // 使用 FileSaver.js
};

importScripts('https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js');

self.onmessage = (e) => {
  const workbook = XLSX.utils.book_new();
  const sheet = XLSX.utils.json_to_sheet(e.data);
  XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1');
  const blob = new Blob(
    [XLSX.write(workbook, { type: 'array', bookType: 'xlsx' })],
    { type: 'application/octet-stream' }
  );
  self.postMessage(blob);
};

function exportToCSV(data) {
  const headers = Object.keys(data[0]).join(',');
  const rows = data.map(row => 
    Object.values(row).map(v => `"${v}"`).join(',')
  );
  const csvContent = [headers, ...rows].join('\n');
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = 'data.csv';
  link.click();
}

// 示例调用
exportToCSV(largeData);

async function exportFromBackend() {
  const response = await api.exportExcel();
  window.location.href = response.downloadUrl; // 后端返回的下载地址
}

const express = require('express');
const XLSX = require('xlsx');
const app = express();

app.get('/export', (req, res) => {
  const data = getHugeDataFromDB(); // 从数据库获取数据
  const workbook = XLSX.utils.book_new();
  const sheet = XLSX.utils.json_to_sheet(data);
  XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1');
  const buffer = XLSX.write(workbook, { type: 'buffer' });
  res.setHeader('Content-Disposition', 'attachment; filename=data.xlsx');
  res.send(buffer);
});

app.listen(3000);