使用浏览器打印功能可将HTML页面导出为PDF，通过“打印预览”调整布局、边距并选择“另存为PDF”即可保存；结合@media print的CSS样式能优化输出效果，隐藏非必要元素、设置分页和字体；开发者还可利用html2pdf.js等库实现一键导出。
要将HTML页面以适合打印的格式保存或导出为PDF，可以利用浏览器自带功能结合CSS打印样式来优化输出效果。关键在于确保页面在打印时排版清晰、去除不必要的元素（如导航栏、广告），并正确设置边距和分页。
使用浏览器直接打印为PDF
现代浏览器（Chrome、Edge、Firefox等）都支持将网页“打印”为PDF文件，这是一种最简单快捷的方式：
- 打开目标HTML页面，在键盘上按下 Ctrl+P（Windows）或 Cmd+P（Mac）调出打印窗口。
- 在打印机选项中选择 “另存为PDF” 或 “Microsoft Print to PDF”。
- 点击“页面设置”可调整边距、纸张方向（横向/纵向）、是否包含背景图形等。
- 勾选“背景图形”可在PDF中保留颜色和背景图（部分浏览器默认不显示）。
- 点击“保存”并选择存储路径，即可生成PDF文件用于打印或分享。
优化HTML打印样式的CSS设置
如果你能编辑HTML源码，可以通过添加专门的打印CSS来控制打印效果，让导出更专业：
- 使用 @media print 规则编写仅在打印时生效的样式。
- 隐藏不需要打印的元素：
.no-print { display: none; } - 设置分页断点避免内容被截断：
.page-break { page-break-before: always; } - 调整字体大小、边距和颜色，确保黑白打印也清晰可读。
前端实现一键导出PDF（高级用法）
对于开发者，可通过JavaScript库实现网页内容自动转PDF下载：
立即学习“前端免费学习笔记（深入）”；
- 引入 html2pdf.js 或 jsPDF + html2canvas 库。
- 指定要导出的HTML元素（如 document.getElementById('content')）。
- 调用库方法生成PDF并触发下载，例如：
html2pdf().from(element).save('page.pdf'); - 适用于需要频繁导出或集成到系统中的场景。
基本上就这些常用方法。日常使用浏览器“打印为PDF”已足够；若需批量或定制化输出，再考虑添加打印样式或使用JS库处理。关键是提前预览打印效果，确认布局无误再导出。
