用浏览器另存为pdf最简单：按ctrl+p→选“另存为pdf”→保存；需确保页面完全加载，勾选“背景图形”，注意css分页控制和文件校验。
用浏览器直接另存为 PDF 最简单
绝大多数现代浏览器（Chrome、Edge、Firefox）都内置了将当前页面转成 PDF 的功能，不需要装额外工具。关键不是“怎么打开”，而是“怎么生成”——PDF 本身是静态文件，生成后双击就能用系统默认 PDF 阅读器打开。
操作路径统一是：Ctrl+P（或 Cmd+P）→ 打印目标选「另存为 PDF」→ 点击「保存」。注意不是「打印」按钮下方的「另存为」，而是弹出的打印设置面板里「目标」或「打印机」下拉菜单中选 Save as PDF 或 Microsoft Print to PDF（Windows）/Save as PDF（macOS）。
- Chrome / Edge 默认支持页眉页脚、背景图形、分页控制，勾选
Background graphics才能保留 CSS 背景色和图片 - Firefox 对
@media print规则响应更严格，如果页面有专门的打印样式表，它会优先采用 - 某些页面含大量 JS 动态渲染内容（比如 React/Vue 单页应用），必须等页面完全加载、数据填充完毕后再按 Ctrl+P，否则 PDF 里可能空白或缺内容
Node.js 服务端生成 PDF 需用 Puppeteer
如果要在服务器上自动生成 HTML 转 PDF（比如导出报表、发票），puppeteer 是目前最稳定的选择。它本质是控制 Chrome 实例，所以渲染效果和手动另存一致，但得写代码、跑服务。
核心流程：启动浏览器 → 新建页面 → page.goto() 加载 HTML（可本地文件或 URL）→ page.pdf() 输出二进制流 → 写入文件。
立即学习“前端免费学习笔记（深入）”；
-
page.pdf()的format参数常用'A4'，path指定输出路径，如path: './report.pdf' - 若 HTML 含本地资源（CSS、字体、图片），必须用
file://协议或起本地 HTTP 服务，puppeteer不支持直接读取相对路径的样式文件 - 生成速度取决于页面复杂度，首次启动 Chromium 开销大，建议复用
browser实例，不要每次请求都launch()
PDF 打不开？先确认是不是真 PDF 文件
常见假 PDF：后缀是 .pdf，但实际是 HTML 文件改名；或者用某些老旧工具导出时选错了格式，生成的是 .prn 或编码损坏的二进制流。
验证方法很简单：用文本编辑器（如 VS Code）打开该文件，开头如果是 %PDF-（比如 %PDF-1.7），就是合法 PDF；如果看到 或大量 HTML 标签，说明根本没转成功。
- Windows 上双击打不开，右键「属性」看「类型」是否真是
PDF 文件，不是的话重命名无用，得重新导出 - Mac 上用
file report.pdf命令行检查类型，输出含PDF document才对 - Linux 或 CI 环境中，
puppeteer生成失败常静默返回空 buffer，务必检查pdfBuffer.length > 0再写文件
CSS 控制 PDF 分页经常失效
浏览器打印预览里能看到分页线，但导出后内容被裁断或跨页错乱，问题几乎全出在 CSS 的分页声明上。原生支持有限，page-break-before、break-before 这些属性行为不一致。
真正可靠的做法只有两个：break-inside: avoid 防止单个块被拆开；page-break-after: always 强制某元素后翻页。其他属性在不同浏览器里表现差异极大。
- Flex/Grid 容器内部的子元素加
break-inside: avoid通常无效，得把该子元素单独包一层<div> 并设为 <code>display: block - 表格分页极难控制，
<thead> 固定到每页顶部基本做不到，建议改用纯 CSS Grid 模拟表头，或服务端拼接多页 PDF <li>导出前在 DevTools 里切到「Rendering」面板，勾选 <code>Emulate CSS media type: print，能提前看到分页效果，比反复导出试错快得多
生成 PDF 看似一步操作，但背后涉及渲染时机、CSS 媒体查询兼容性、文件协议限制、二进制完整性校验多个层面。最容易忽略的是：**HTML 页面还没渲染完就点了 Ctrl+P，或者服务端生成时没等 JS 数据加载完成就调用了
page.pdf()**。
