⚡ Web Worker 导出

使用 generate_data_bytes() 在 Worker 线程中生成文件,主线程始终保持响应。

💡 核心原理: WASM 的 CSV/XLSX 序列化在 Worker 线程执行,生成的字节通过 Transferable 零拷贝传回主线程触发下载。 下方的计时器和输入框都依赖主线程 — 主线程阻塞时它们会同时冻结。

Worker 导出 vs 主线程导出

生成 300000 行数据并导出,对比 Worker 和主线程的性能差异:

0
JS 计时器(每 50ms +1)
↑ 主线程阻塞时无法输入
就绪

🧵 Worker 线程

-

🔴 主线程

-

💡 使用方式

// 1. 低层 API:直接在 Worker 中使用 generate_data_bytes()
// worker.js:
import init, { generate_data_bytes, ExportFormat } from 'belobog-stellar-grid';
await init();

self.addEventListener('message', (e) => {
    const bytes = generate_data_bytes(e.data.data, e.data.options);
    self.postMessage({ bytes: bytes.buffer }, [bytes.buffer]);
});

// 2. 高层 API:使用 @bsg-export/worker 的 ExportWorker 类
import { ExportWorker } from '@bsg-export/worker';
import MyWorker from '@bsg-export/worker/worker?worker';

const worker = new ExportWorker(new MyWorker());
await worker.init();
await worker.exportData(data, { columns, filename: '报表.xlsx', format: 1 });
worker.terminate();