HTML5 Worker不能直接生成PDF，但可配合pdf-lib等无DOM依赖库在后台线程构建PDF：主线程预加载数据并postMessage传递，Worker用pdf-lib生成Uint8Array后回传，主线程构造Blob下载。
在HTML5中，Worker本身不能直接生成PDF，但它可以配合PDF生成库（如jsPDF、pdf-lib）在后台线程中完成耗时的PDF构建任务，避免阻塞主线程，再通过Blob URL触发下载。关键在于：Worker不支持DOM和部分浏览器API（如canvas.toDataURL()），需提前处理好数据或使用纯JS方案。
选择适合Worker环境的PDF库
jsPDF基础版可在Worker中运行，但需注意：
– 避免调用addHTML、fromHTML等依赖DOM的方法；
– 图片需转为base64字符串或ArrayBuffer后传入；
– 字体嵌入需预加载并以ArrayBuffer形式传递。
更推荐pdf-lib（纯TypeScript实现，无DOM依赖），它支持在Worker中创建、修改PDF，且体积小、兼容性好。
- 在主线程中准备文本、表格数据、图片二进制（fetch + arrayBuffer）
- 将结构化数据（JSON）和图片ArrayBuffer通过
postMessage发送给Worker - Worker内用pdf-lib构建PDF文档，生成Uint8Array
- 将Uint8Array回传主线程，构造Blob并触发下载
Worker中生成PDF的典型流程
以下为pdf-lib在Worker中的最小可行示例逻辑：
立即学习“前端免费学习笔记（深入）”；
- 主线程读取图片：
const imgRes = await fetch('/chart.png'); const imgBytes = await imgRes.arrayBuffer(); - 主线程启动Worker：
const worker = new Worker('pdf-worker.js'); - 主线程发送数据：
worker.postMessage({ text: '报表标题', imageData: imgBytes }); - Worker中加载pdf-lib（需提前打包为单文件，如用Vite/Pika打包）
- Worker中创建PDF：
const pdfDoc = await PDFDocument.create(); const page = pdfDoc.addPage(); page.drawText(...); - Worker导出字节数组：
const bytes = await pdfDoc.save(); postMessage({ pdfBytes: bytes }, [bytes.buffer]);
主线程接收并触发下载
Worker返回PDF字节数组后，主线程需安全构造Blob并下载：
- 监听
worker.onmessage，提取event.data.pdfBytes（Uint8Array） - 创建Blob：
const blob = new Blob([pdfBytes], { type: 'application/pdf' });</li> <li>生成URL：<code>const url = URL.createObjectURL(blob); - 创建临时a标签下载：
const a = document.createElement('a'); a.href = url; a.download = 'report.pdf'; a.click(); - 清理内存：
URL.revokeObjectURL(url);
注意事项与优化建议
实际应用中需规避常见陷阱：
- Worker无法访问localStorage、indexedDB（除非用专用Worker API），状态需由主线程传入
- 大文件（如多页含高清图PDF）建议分块生成或启用pdf-lib的streaming写入（v1.17+）
- 字体中文支持：必须嵌入支持Unicode的字体（如Noto Sans CJK），且以ArrayBuffer方式加载
- 调试Worker：Chrome DevTools → Application → Service Workers → “Workers”标签页可查看独立控制台
- 兼容性兜底：若浏览器不支持Worker，降级到主线程同步生成（仅限小文档）
