HTML转矢量PDF必须使用基于浏览器引擎的服务端方案（如puppeteer），保留文字、路径、SVG的原生向量信息；禁用html2canvas等位图渲染，嵌入字体并避免wkhtmltopdf兼容问题。
HTML 转矢量 PDF 的核心在于：必须保留文字、路径、SVG 图形的原始向量信息，不能走「截图 → PNG → 嵌入 PDF」这种位图路线。否则生成的 PDF 会模糊、无法复制文字、缩放失真。
用 puppeteer 生成真正矢量 PDF（推荐）
puppeteer 基于 Chromium，能直接将 HTML 渲染结果以 PDF 形式导出，且默认保持文本为向量文字、<svg> 和 CSS 绘制的边框/渐变均为原生 PDF 向量对象。
- 确保 HTML 中没有强制转成 Canvas 或截图的 JS 逻辑（比如
html2canvas） - 禁用字体回退可提升一致性：
await page.pdf({ path: 'out.pdf', printBackground: true, format: 'A4', fontEmbedding: true // 关键：嵌入字体，避免 PDF 中文字被替换为轮廓 }); - 若页面含外部字体（如 Google Fonts），需提前预加载并
@font-face引入本地副本，否则 PDF 可能降级为系统字体或文字转曲
避免 wkhtmltopdf 的字体与 SVG 兼容陷阱
wkhtmltopdf 表面支持矢量，但实际对现代 CSS（Flex/Grid）、SVG <use>、CSS 变量等支持薄弱，容易把本该是向量的文字/图形转成位图栅格块。
- 启用
--enable-local-file-access才能正确加载本地@font-face字体文件 - SVG 内联时务必用
<svg>标签原生写法，不要用<img src="xxx.svg">—— 后者在 wkhtmltopdf 中常被光栅化 - 禁用硬件加速参数：
--disable-smooth-scrolling --no-pdf-compression，减少意外压缩导致的矢量失真
纯前端方案（如 jsPDF + html2canvas）基本不满足矢量要求
这类组合本质是「把 DOM 截成 Canvas，再把 Canvas 导出为图片，最后塞进 PDF」——全程无向量，输出是单层位图。
立即学习“前端免费学习笔记（深入）”；
-
jsPDF.addHTML()已废弃，jsPDF.html()仍依赖html2canvas，无法还原文字选中、路径描边等矢量特性 - 哪怕源 HTML 里全是
<svg>，html2canvas也会将其渲染为像素图，PDF 中放大即模糊 - 唯一例外：手动用
jsPDF.setDrawColor()/.rect()/.text()等 API 逐元素重绘，但这等于重写整个 HTML 渲染逻辑，不现实
真正可控的矢量输出，目前只有服务端基于浏览器引擎的方案（puppeteer / Playwright）。所有“零依赖”“纯前端”“一键下载”的 HTML 转 PDF 工具，只要没声明使用 Blink/WebKit 渲染内核，基本都在悄悄生成位图 PDF。
