Chrome DevTools 中通过 Rendering 面板勾选 Emulate CSS media: print 可实时预览打印效果；需确保 @media print 规则生效、避免样式覆盖、禁用干扰 JS，并针对性处理表格分页、重置定位/浮动、嵌入中文字体及同步动态 DOM 状态。
Chrome DevTools 里怎么模拟打印预览
不用反复点「打印」弹窗，就能实时看到打印效果——关键就是用 Chrome DevTools 的 Rendering 面板。打开开发者工具（F12 或 Cmd+Opt+I），切换到 Rendering 标签页，勾选 Emulate CSS media: print。页面会立刻按 @media print 规则重绘，包括隐藏元素、字体变小、背景消失等变化。
常见错误现象：勾选后页面没反应，或者只变黑/白一片。原因通常是：@media print 块写在了外部 CSS 文件里，但该文件没加 media="print" 属性；或规则被更高优先级的屏幕样式覆盖（比如用了 !important 却没在 print 块里也加）。
实操建议：
- 确保
@media print规则在当前页面生效范围（<style></style>内或已正确加载的 CSS 中） - 在
@media print里对关键选择器显式加!important，避免被屏幕样式劫持 - 禁用所有非必要 JS（如动画、懒加载），防止 DOM 在模拟时动态变化
为什么 print 媒体下表格还是被截断
浏览器打印引擎对 table 的分页控制很“激进”，默认允许在任意行之间断开，哪怕破坏语义。仅靠 display: table 或 width: 100% 完全无效。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给
table元素加style="page-break-inside: avoid;"（注意：IE 不支持，需 fallback） - 如果表格很长，改用
break-before: page在每张子表前强制分页，比硬撑更可靠 - 避免在
table外层套flex或grid容器——Firefox 和 Safari 打印时可能直接忽略其布局逻辑 - 检查
th/td是否有固定width值，百分比宽度在打印中容易塌缩，建议用min-width+max-width控制
window.print() 调用后样式突然错乱
不是样式写错了，而是打印上下文触发了浏览器的“重置行为”：浮动被清空、position: fixed 元素在每页重复渲染、背景色自动关闭。这些都不是 bug，是规范行为。
实操建议：
- 在
@media print里显式重置：* { float: none !important; position: static !important; } - 用
@page { margin: 15mm; }控制纸张边距，别依赖body的margin - 图片必须加
max-width: 100%; height: auto;，否则高 DPI 屏幕下导出 PDF 时会被拉伸溢出 - 慎用
visibility: hidden替代display: none——它仍占文档流，可能引发意外分页
打印预览里中文显示为方块或乱码
本质是字体未嵌入或 fallback 失败。Chrome / Edge 导出 PDF 时若找不到声明的中文字体（比如“微软雅黑”），就会用系统默认无衬线体，而某些 PDF 阅读器不支持该字体的字形映射。
实操建议：
- 优先用 web-safe 字体链：
font-family: "Source Han Sans CN", "Noto Sans CJK SC", sans-serif; - 避免写
"Microsoft YaHei"，Windows 下应写"微软雅黑"（旧版 Chrome 对英文名识别不稳定） - 不要依赖
@font-face加载的自定义字体打印——加载时机不可控，且多数浏览器不嵌入到 PDF - 测试时直接用 Chrome 的「另存为 PDF」功能，比 Ctrl+P → 保存更贴近真实输出
最易被忽略的是：打印样式不是“写完就跑”，它必须和 DOM 状态同步。比如一个由 JS 动态展开的详情区域，如果没在打印前强制展开并移除 no-print 类，那它在预览里就是空白的——模拟打印不会执行 JS 逻辑，只渲染当前静态 DOM。
