html怎样转矢量pdf_html转矢量pdf法【要点】

HTML转矢量PDF必须使用基于浏览器引擎的服务端方案（如puppeteer），保留文字、路径、SVG的原生向量信息；禁用html2canvas等位图渲染，嵌入字体并避免wkhtmltopdf兼容问题。

HTML 转矢量 PDF 的核心在于：必须保留文字、路径、SVG 图形的原始向量信息，不能走「截图 → PNG → 嵌入 PDF」这种位图路线。否则生成的 PDF 会模糊、无法复制文字、缩放失真。

用 puppeteer 生成真正矢量 PDF（推荐）

puppeteer 基于 Chromium，能直接将 HTML 渲染结果以 PDF 形式导出，且默认保持文本为向量文字、 和 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 、CSS 变量等支持薄弱，容易把本该是向量的文字/图形转成位图栅格块。

• 启用 --enable-local-file-access 才能正确加载本地 @font-face 字体文件
• SVG 内联时务必用 标签原生写法，不要用 —— 后者在 wkhtmltopdf 中常被光栅化
• 禁用硬件加速参数：--disable-smooth-scrolling --no-pdf-compression，减少意外压缩导致的矢量失真

纯前端方案（如 jsPDF + html2canva

s）基本不满足矢量要求

这类组合本质是「把 DOM 截成 Canvas，再把 Canvas 导出为图片，最后塞进 PDF」——全程无向量，输出是单层位图。

• jsPDF.addHTML() 已废弃，jsPDF.html() 仍依赖 html2canvas，无法还原文字选中、路径描边等矢量特性
• 哪怕源 HTML 里全是 ，html2canvas 也会将其渲染为像素图，PDF 中放大即模糊
• 唯一例外：手动用 jsPDF.setDrawColor() / .rect() / .text() 等 API 逐元素重绘，但这等于重写整个 HTML 渲染逻辑，不现实

真正可控的矢量输出，目前只有服务端基于浏览器引擎的方案（puppeteer / Playwright）。所有“零依赖”“纯前端”“一键下载”的 HTML 转 PDF 工具，只要没声明使用 Blink/WebKit 渲染内核，基本都在悄悄生成位图 PDF。