浏览器原生

不支持编程化HTML转PDF，window.print()虽免插件但需手动触发、控制弱、无法获取PDF数据；真正可行方案是前端提交HTML至后端，由Puppeteer等工具渲染并返回PDF流。

不能完全免插件——浏览器原生不提供直接将 HTML 转 PDF 的 API，window.print() 是唯一内置方案，但它依赖用户手动触发、无法编程控制格式、页眉页脚不可靠，也不支持后台静默生成。

为什么 window.print() 算“免插件”但不实用

它确实不需额外安装扩展或库，但本质是调用浏览器打印模块，所有行为都受制于用户操作和打印设置：

• 必须由用户点击触发（无法自动执行），且会弹出系统打印对话框
• @media print 样式能控制部分内容，但对分页、页边距、页眉页脚的控制极其有限，Chrome 甚至默认添加 URL 和日期
• 无法获取生成的 PDF 二进制数据，更不能上传、存储或嵌入到其他流程中
• 不同浏览器渲染结果差异大（尤其是 Flex/Grid、CSS transforms、字体嵌入）

真正可用的“前端免插件”方案只有服务端配合

所谓“免插件”，是指用户浏览器里不装任何额外扩展或本地软件，但后端必须承担转换工作。常见可靠路径是：

• 前端用 fetch 提交 HTML 字符串或 URL 给后端接口
• 后端用稳定工具（如 Puppeteer、WeasyPrint、wkhtmltopdf）渲染并返回 PDF 流
• 前端接收 response.blob() 并用 URL.createObjectURL() 触发下载

示例关键代码（前端）：

fetch('/api/html-to-pdf', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ html: '
Hello
' })
})
.then(res => res.blob())
.then(blob => {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'output.pdf';
  a.click();
  URL.revokeObjectURL(url);
});

Puppeteer 在服务端是最稳妥的选择

它基于 Chromium，HTML/CSS/JS 渲染一致性高，支持完整 DOM 操作、等待条件、自定义纸张、header/footer 模板：

• 页边距、缩放、背景图、字体嵌入均可精确控制（通过 page.pdf() 的 margin、printBackground、format 等参数）
• 可拦截网络请求、注入 CSS、执行 JS，解决动态内容或字体加载问题
• 注意：不能在无头环境（如某些 Serverless）运行；内存占用较高；首次启动有延迟
• 错误常见于未等待资源加载完成就调用 pdf() —— 应用 page.waitForNetworkIdle() 或 page.waitForSelector()

真正的难点不在“怎么转”，而在“怎么让 PDF 和屏幕所见一致”：字体缺失、跨域资源被拒、CSS 变量未展开、相对路径解析失败——这些都得在服务端预处理，不是加个库就能解决的。