前端导出10万条数据？还有更骚的操作！WebWorker优化导出Excel！

2023-06-14 11:59:24

Web Worker：前端高性能数据导出

什么是 Web Worker？

随着大数据时代的到来，前端导出大量数据的情况变得越来越普遍。然而，当数据量达到一定程度时，传统的导出方式会遇到困难，如卡顿、崩溃和浏览器假死。Web Worker 应运而生，它是一种前端多线程技术，允许脚本创建独立于主线程运行的工作线程，从而大幅提升前端性能。

Web Worker 导出 Excel 的优势

性能提升： Web Worker 将导出任务转移到工作线程，释放主线程资源，有效提高前端性能。
增强稳定性： 导出任务与主线程隔离，防止因导出失败导致浏览器崩溃。
优化用户体验： 流畅的导出过程提升用户体验，减少因导出卡顿带来的挫败感。

Web Worker 导出 Excel 的实现

1. 创建工作线程：

const worker = new Worker('worker.js');

2. 向工作线程发送数据：

worker.postMessage(data);

3. 接收工作线程数据：

worker.addEventListener('message', (event) => {
  console.log(event.data);
});

4. 在工作线程中导出 Excel：

self.addEventListener('message', (event) => {
  const data = event.data;

  // 将数据导出到 Excel
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('Sheet1');
  worksheet.addRows(data);

  // 将 Excel 导出到文件
  workbook.xlsx.writeBuffer().then((buffer) => {
    self.postMessage(buffer);
  });
});

注意： Web Worker 仅支持在支持 WebSocket 的浏览器中使用。

代码示例

以下示例演示如何在 Web Worker 中导出 10 万行数据到 Excel：

index.html：

<script>
  const worker = new Worker('worker.js');

  worker.addEventListener('message', (event) => {
    const buffer = event.data;
    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    window.open(url);
  });

  worker.postMessage([1, 2, 3, 4, 5]); // 数据源
</script>

worker.js：

self.addEventListener('message', (event) => {
  const data = event.data;

  // 将数据导出到 Excel
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('Sheet1');
  worksheet.addRows(data);

  // 将 Excel 导出到文件
  workbook.xlsx.writeBuffer().then((buffer) => {
    self.postMessage(buffer);
  });
});