打印问题核心在样式隔离、字体链路、执行时机三方面：需用@media print定制样式，确保字体嵌入或使用web-safe字体，并由用户手势触发window.print()。
打印时页面被截断或内容丢失
浏览器默认用屏幕样式渲染打印，display: none、overflow: hidden 或绝对定位元素容易被裁掉。不是所有 CSS 都能在打印上下文中生效。
- 用
@media print单独写打印样式，把关键内容设为display: block、position: Static - 避免用
height: 100vh或max-height控制打印区域高度——打印时视口概念不适用 - 表格记得加
table { page-break-inside: avoid; }，否则可能在行中间断开 - 图片尽量用
max-width: 100%; height: auto;，否则高 DPI 屏幕下打印会拉伸变形
如何让打印按钮只在打印时显示
用户点「打印」前看到「打印」按钮是合理的，但打印预览里再出现这个按钮就多余了，还可能被误点。
- 给按钮加 class，比如
class="print-only"，然后在@media print里写.print-only { display: none; } - 反向控制也行：默认
display: none，@media screen { .print-only { display: inline-block; } } - 别用
visibility: hidden替代display: none—— 它仍占布局空间，可能影响分页
chrome / edge 打印 PDF 时字体乱码或不显示
系统字体（如微软雅黑、苹方）在生成 PDF 时若未嵌入，打印机或阅读器找不到就会 fallback 到默认字体，中文尤其明显。
- 优先用 web-safe 字体：比如
font-family: "Source Han Sans CN", "Noto Sans CJK SC", sans-serif; - 确保 CSS 中声明的字体名和系统安装名一致，windows 下“微软雅黑”不能写成“microsoft YaHei”（部分旧版 Chrome 不识别）
- 如果必须用自定义字体，用
@font-face加载，并设置font-display: swap；但注意：@font-face 加载的字体在打印中不一定可靠，建议仅用于屏幕 - 测试时直接用 Chrome 的「另存为 PDF」功能，比 Ctrl+P → 保存更贴近真实打印行为
JavaScript 触发打印但没反应
window.print() 看似简单，实际受很多限制：异步加载、跨 iframe、弹窗拦截、移动端兼容性都可能让它静默失败。
立即学习“前端免费学习笔记（深入）”；
- 必须由用户手势（click、touchend）触发，
setTimeout(() => window.print(), 100)会失败 - 如果页面有 iframe，且想打印 iframe 内容，得先获取其
contentWindow，再调用iframe.contentWindow.print() - 移动端 safari 对
window.print()支持极差，基本无效；可改用生成 PDF 方案（如 jsPDF + html2canvas），但要注意 canvas 截图无法保留 select、input 的当前值 - 调用前建议加一层判断：
if (typeof window.print === 'function') { window.print(); }，避免报错阻断后续逻辑
打印这件事，表面是按个快捷键，背后卡在样式隔离、字体链路、执行时机三个地方。最容易被忽略的是：你看到的「打印预览」只是浏览器模拟，真连到物理打印机时，驱动、纸张尺寸、甚至打印机固件版本都会悄悄改写输出结果。