window.print()需确保DOM完全渲染后再调用，配合@media print隔离样式，PDF导出需替代方案，分页控制须注意元素显示类型与浏览器兼容性。
打印前先检查 window.print() 触发时机是否正确
很多网页打印出来是空白或只有一半，根本原因不是样式问题，而是 window.print() 被过早调用——比如在图片、异步数据还没加载完时就执行了。浏览器会直接打印当前 DOM 快照，不会等资源加载。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保所有关键内容已渲染完成，例如在
useEffect（React）或mounted（Vue）钩子中调用，而非组件初始化时 - 若页面含懒加载图片或
fetch数据，需显式等待，比如：await Promise.all([imgPromise, dataPromise]); window.print();
- 避免在
onclick里直接写window.print()，除非你确认该按钮点击时 DOM 已稳定
CSS 媒体查询 @media print 必须隔离样式
浏览器默认把屏幕样式全搬进打印预览，结果字体小、背景色深、导航栏乱入——这不是 bug，是没做打印专用样式隔离。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
@media print单独写规则，不要依赖!important覆盖屏幕样式 - 关键操作：隐藏非内容元素：
@media print { .header, .sidebar, .ads { display: none; } } - 强制重设字体大小和行高，避免打印时文字挤成一团：
body { font-size: 12pt; line-height: 1.4; } - 慎用
background-image和color：多数打印机默认关闭背景图形，文字颜色也可能被转为灰度
PDF 导出替代方案：window.print() 不等于 PDF 文件
用户点“打印”弹出的是系统打印对话框，不是自动生成 PDF。想直接下载 PDF，window.print() 无能为力，必须换方案。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 纯前端生成 PDF 推荐
jsPDF+html2canvas，但注意：html2canvas截图不支持跨域图片、CSS Grid 布局可能错位 - 服务端生成更稳：把 HTML 传给后端，用
Puppeteer或wkhtmltopdf渲染，可精确控制页眉页脚、分页符 - 如果只是想让用户「点一下存 PDF」，最简单是引导他们：在打印对话框里选择「另存为 PDF」（Chrome / Edge / Safari 均支持），别自己造轮子
分页控制：page-break-inside: avoid 失效的常见原因
表格或卡片列表总在中间被截断，加了 page-break-inside: avoid 没反应？大概率是父容器用了 flex 或 grid，或者元素本身是 inline 级别。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
page-break-inside: avoid只对块级元素生效，确保目标元素有display: block - Flex 容器内子项默认不响应分页指令，改用
display: block+page-break-before: always手动分页 - 表格分页更稳妥的方式是用
thead+tbody，并给thead加display: table-header-group，浏览器会自动重复表头 - Chrome 115+ 开始支持
break-inside: avoid（标准语法），但旧版仍需兼容page-break-inside
window.print() 那一行代码，而是它背后 DOM 状态、CSS 作用域、浏览器渲染节奏这三者的咬合精度。稍有错位，预览就和预期差一截。 
