window.print() 打印效果差的根源在于浏览器默认添加页眉页脚且打印样式未隔离，需用 @media print 精确控制布局、隐藏非必要元素、强制颜色显示，并通过 break- 属性优化分页，同时引导用户手动关闭页眉页脚。
window.print() 能实现基础打印，但直接调用常导致页眉页脚残留、样式错乱、内容截断——这不是方法错了，是没控制好打印上下文。
为什么 window.print() 打出来总是带网址和页码？
浏览器默认在打印时添加页眉（含 URL、页码、日期）和页脚，window.print() 本身不提供关闭接口，必须靠 CSS 媒体查询干预。Chrome 和 Edge 支持 @media print 中的 -webkit-print-color-adjust: exact 和部分伪元素隐藏，但页眉页脚只能通过系统级设置或打印预览手动关（用户侧不可控）。
- 开发者能做的：用
@media print { @page { margin: 0; } }缩小页边距（部分生效） - 关键限制：
@page的margin在 Chrome 中对页眉页脚区域无效，仅影响内容区 - 真正可靠的做法：引导用户在打印对话框中手动取消「页眉和页脚」勾选（无法用 JS 自动触发）
打印时样式全乱了，CSS 不起作用？
打印样式默认继承屏幕样式，但很多类名、display: flex、浮动、背景图会被浏览器忽略或重置。必须显式定义 @media print 规则，且优先级要够高。
- 用
!important覆盖第三方 UI 框架的打印样式（如 Ant Design 的.ant-btn在打印时可能消失） - 禁用非必要元素：
@media print { .no-print, .header, .nav { display: none !important; } } - 强制显示背景色/图：
@media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }（注意 Safari 15.4+ 才支持标准属性） - 避免用
vh/vw单位——打印时视口概念不存在，会失效
内容被截断或分页位置不对怎么办？
浏览器按物理页面自动分页，但默认不分页逻辑不智能，常在表格中间、卡片中央断开。需用 CSS 分页控制符干预。
- 防断点：
@media print { table { page-break-inside: avoid; } } - 强制分页：
.page-break-before { break-before: page; }（推荐用标准break-前缀，而非旧版page-break-） - 注意兼容性：
break-inside: avoid在 Firefox 中对 flex 容器无效，需包裹一层div并设为display: block - 调试技巧：在 DevTools 的 Rendering 面板开启「Emulate CSS media」→ 「print」，实时看效果
打印功能真正的复杂点不在 window.print() 这一行代码，而在于它把渲染控制权交给了用户本地浏览器和打印机驱动。你写的 CSS 可能被 Chrome 忽略，却被 Firefox 当成圣旨；用户装的某款 PDF 虚拟打印机又可能完全绕过你的 @media print。留出容错空间比追求完美更实际。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
