浏览器原生不支持编程化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: '<h1>Hello</h1>' })
})
.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 变量未展开、相对路径解析失败——这些都得在服务端预处理，不是加个库就能解决的。
