对比矢量渲染引擎与传统的 HTML-Canvas-to-Image 拼接输出
调用主线程收集轻量级 DOM 状态，通过 Worker 传给后台的 Rust-WASM 模块直接渲染出底层的矢量图元 PDF 流。
基于 html2canvas 对当前 DOM 进行像素级截图并返回 Canvas，再通过 jsPDF 把 Canvas 图片嵌入写入 PDF 文档。
在当前运行环境中先后串行执行两种引擎的 PDF 转换流程，以对比耗时和最终生成的 PDF 文件字节大小。
The chart below is structured as pure vector SVG lines and fills. Under a vector-backed engine like dompdf.js, this graph retains mathematically infinite clarity when zooming into the PDF, rendering natively. Under html2pdf.js, the graphic undergoes rasterization.
This second page details the operations across the divisions. In print view, the
pageBreak attribute enforces a clean page break, ensuring this section begins exactly on
Page 2.
| Division | Main Sector | Revenue (M) | Operating Margin | Performance |
|---|---|---|---|---|
| Infrastructure Cloud | Server Operations & SaaS | $18.4M | 34.2% | Optimal |
| Neural Analytics | Deep Models & Inference | $14.1M | 29.6% | Optimal |
| Hardware Security | Edge Hardware Keys | $9.8M | 25.1% | Stable |
| Consumer Platforms | Mobile Apps & Ads | $5.9M | 12.4% | Monitor |
This section exercises advanced CSS properties — gradients, rounded corners, dashed borders, and complex SVG charts — to benchmark rendering fidelity across both PDF engines.
| Region / Division | H1 Performance | H2 Forecast | SLA Status | ||
|---|---|---|---|---|---|
| Revenue | Margin | Revenue | Margin | ||
| North America (NA) | $12.4M | 36.2% | $14.8M | 38.0% | Exceeded |
| $8.2M | 28.5% | $9.5M | 30.2% | ||
| Asia-Pacific (APAC) | $14.1M | 32.8% | $16.5M | 34.5% | On Target |
| $5.6M | 14.3% | $6.2M | 15.1% | ||
该示例只包含标题、段落与少量强调文字，用于观察纯文本排版、分页与文本提取表现。 下方控制区只会向本示例末尾追加文本内容，不会插入表格、图表或其他结构化模块。
A text-dominant export path is often the cleanest way to verify whether a PDF engine preserves reading order, line wrapping, selectable glyphs, and page-flow continuity across long passages. In contrast to charts or tables, a narrative article exposes width measurement drift and paragraph fragmentation much earlier.
This page keeps the structure intentionally simple so additional content can be appended repeatedly without changing the semantic shape of the document. Each inserted block is another paragraph-style section, making the pagination result easy to compare between engines.
The content style here favors medium-length paragraphs, restrained spacing, and a neutral editorial rhythm. That makes it suitable for validating how line boxes continue near the right edge, whether paragraph spacing remains consistent, and whether exported text can be copied back in the same logical order.
Because no decorative SVG, cards, or tabular layouts are involved, the result isolates the text pipeline itself. If anything drifts, clips, or reflows unexpectedly, the issue is much easier to attribute.
Use the controls above to append more paragraphs. Every added block is marked with divisionDisable so the
renderer can keep each textual section intact when possible.
INVOICE NO. #INV-2026-9082
| 项目名称 / Description | 单价 (Price) | 数量 (Qty) | 金额 (Amount) |
|---|---|---|---|
|
云端智算实例服务 (WASM Cloud Core) GPU v100-80G clusters, July usage |
¥8,500.00 | 4 | ¥34,000.00 |
|
神经网络编译器定制开发 (Compiler Optimization) Technical Consulting & Engineering hours |
¥12,000.00 | 1 | ¥12,000.00 |
|
存储资源扩展服务 (Persistent Volume Storage) 10TB High-performance NVMe block storage |
¥1,200.00 | 2 | ¥2,400.00 |
| 技术特征 | dompdf.js (WASM 版) | html2pdf.js |
|---|---|---|
| 技术机制 | Rust + WASM + Web Worker 后台转换 | html2canvas 渲染像素 + jsPDF 拼接 |
| 渲染输出 | 原生 PDF 矢量元指令 (纯矢量图文) | 栅格图片嵌入 (截图合成) |
| 文本选择与检索 | 原生支持 (可拖拽选中、全文复制/搜索) | 不支持 (输出为纯图片) |
| 缩放清晰度 | 无损缩放 (任意分辨率打印保持极清) | 放大失真 (受截图分辨率限制) |
| 分页渲染极限 | 不受限制 (内存允许可渲染数千页) | 受限 (受 Canvas 浏览器像素上限限制) |
| UI 线程卡顿 | 无感 (在独立 Worker 后台运算) | 严重卡顿 (截图与像素读取会阻塞主线程) |
| 中文字体嵌入 | 支持 (支持 TTF 字体子集化打包嵌入) | 无需 (但输出实际为文本图像) |
const element = document.querySelector('#capture-area'); // 准备字体配置 (仅在中英文混合电子发票且已加载字体时配置) const fontConfig = window.customFontBytes ? { fontFamily: 'SourceHanSansSC-Regular', fontBytes: window.customFontBytes, fontStyle: 'normal', fontWeight: 400 } : undefined; const options = { pagination: true, // 开启自动分页 format: 'a4', // A4标准尺寸 useCORS: true, // 支持跨域图片加载 compress: true, // 压缩开关 putOnlyUsedFonts: true, // 仅嵌入所用字形字重 fontConfig: fontConfig // 注入字体 }; window.dompdf(element, options) .then(blob => { const blobUrl = URL.createObjectURL(blob); iframe.src = blobUrl; }) .catch(err => console.error(err));
// 引入 html2pdf.js，通过配置 html2canvas 与 jsPDF 完成生成 const element = document.querySelector('#capture-area'); const opt = { margin: 0, filename: 'html2pdf-export.pdf', image: { type: 'jpeg', quality: 2 }, html2canvas: { scale: 2, // 决定渲染分辨率 useCORS: true, logging: false, scrollY: 0, // 解决网页滚动时 HTML 截图向下偏移的问题 scrollX: 0 }, jsPDF: { unit: 'pt', format: 'a4', orientation: 'portrait' }, pagebreak: { mode: ['css', 'legacy'], avoid: ['tr', 'h1', 'h2', 'h3', '.report-stat-card', '.report-chart-container', '.invoice-details-grid > div', '[divisionDisable]'] } }; html2pdf() .from(element) .set(opt) .output('blob') .then(blob => { // 渲染生成图片拼贴型 PDF const blobUrl = URL.createObjectURL(blob); iframe.src = blobUrl; });