打印预览需用户手势触发且资源就绪；用@media print重置样式、禁用flex改用table布局；字体限系统内置，图标用内联SVG；调试启用DevTools打印媒体模拟。
打印预览不触发？检查 window.print() 调用时机和权限
直接在页面加载完成前、或异步资源（如图片、字体、CSS）未就绪时调用 window.print()，会导致预览空白或样式丢失。现代浏览器（Chrome/Firefox/Edge）对打印上下文有严格限制：必须由用户手势（如点击）触发，且不能被 JS 延迟或封装在 setTimeout 中（除非延迟极短且明确可控）。
- ✅ 正确做法：绑定到按钮
onclick，或使用addEventListener('click', () => window.print()) - ❌ 错误示例：
document.addEventListener('DOMContentLoaded', () => { setTimeout(() => window.print(), 1000); });—— 多数浏览器会静默拦截 - ⚠️ 注意：某些内嵌 iframe 页面中调用
window.print()可能无效，需确保调用的是目标 iframe 的contentWindow.print()
CSS 打印样式错乱？用 @media print 重置关键属性
浏览器默认打印样式会忽略很多屏幕样式（如 background-color、float、position: fixed），同时强制启用分页行为。不显式声明打印专用 CSS，就会出现内容截断、空白页、文字重叠、背景消失等问题。
- 必须隐藏非必要元素：
@media print { .navbar, .ads, .print-hide { display: none !important; } } - 强制清除浮动与定位：
@media print { * { float: none !important; position: static !important; } - 确保文字可读：
@media print { body { font-size: 12pt; line-height: 1.4; color: #000; background: #fff; } } - 控制分页：用
page-break-inside: avoid防止表格行/卡片被拆开；break-before: page强制另起一页（慎用，易多出空白页）
表格/列表打印时列宽崩溃？避免百分比和 flex 布局
打印引擎对 CSS Grid/Flex 的支持极弱，尤其在跨浏览器场景下，display: flex 容器内的子项常被压成单列或宽度归零；width: 100% 在分页上下文中也容易失效。
- ✅ 推荐表格结构：用语义化
，列宽设为
px或em，避免%和vw- ✅ 替代 Flex 布局：改用
display: table-cell+display: table-row模拟，兼容性更好- ⚠️ 特别注意：Chrome 打印预览中，
overflow-x: auto容器的内容会被裁剪，务必移除或用white-space: nowrap+font-size缩小适配- ? 小技巧：给长文本加
word-break: break-word，防止英文单词撑破列宽字体/图标不显示？打印时只信任系统内置字体和内联 SVG
Web 字体（如 Google Fonts、
@font-face加载的自定义字体）在打印预览中大概率回退为默认衬线字体；icon font（如 Font Awesome）则直接变为空心方块或 Unicode 替代符。立即学习“前端免费学习笔记（深入）”；
- ✅ 字体方案：CSS 中限定
font-family: "Times New Roman", Times, serif等系统级字体，避免依赖网络字体 - ✅ 图标方案：用内联
替代，确保路径和颜色硬编码（不要用 CSS fill 控制） - ⚠️ 注意：某些 PDF 打印驱动（如 Windows 的 Microsoft Print to PDF）会忽略
currentColor，建议显式写死fill="#000" - ? 测试方法：在 Chrome 打印预览中按
Ctrl+P→ 选择“另存为 PDF”，再用 Acrobat 打开验证字体嵌入效果
实际调试时，最易被忽略的是「打印样式表未生效」——比如写了
@media print但文件没被正确引入，或被更高优先级的!important屏幕样式覆盖。建议在 DevTools 的 Elements 面板中勾选「Rendering」→「Emulate CSS media type」→ 选print，实时观察 DOM 样式变化。 - ✅ 替代 Flex 布局：改用
