window.print() 打印效果差的根本原因是未将打印视为独立渲染通道；必须用单独的 print.css 或置于末尾的 @media print 规则，配合 table 分页控制、HTML 转义、局部显示方案及 PDF 导出替代。
直接用 window.print() 打印出来的页面，大概率是错位、断表、没链接、字发虚——这不是浏览器问题，是你没把打印当成一个独立渲染通道来对待。
为什么 @media print 必须单独加载或写在最后
很多人把 @media print 塞进 import 进来的 CSS 文件末尾，或者混在屏幕样式中间，结果打印预览里完全不生效。浏览器对它的解析依赖样式来源和顺序，不是“写了就管用”。
- 最稳妥方式：用
<link rel="stylesheet" media="print" href="print.css">单独引入，避免被其他规则覆盖 - 若内联书写：
@media print块必须放在所有屏幕样式之后，且不能嵌套在@media screen或其他媒体查询里 - 页面含
<iframe>？父页的@media print不会穿透生效，需在 iframe 内单独定义或提前提取内容
表格跨页断裂、表头消失怎么修
这是打印中最影响专业感的问题，尤其带 <thead> 的长表——浏览器默认不会重复表头，<tr> 被切开后下半截孤零零挂在第二页开头。
- 给
<table>加page-break-inside: avoid;，防止整表被拆（Chrome/Firefox 支持良好） - 显式声明
thead { display: table-header-group; }，否则跨页时表头直接消失 - 横向打印长表？加
@page { size: landscape; }，并确保容器max-width: none;，否则会被 A4 纵向宽度截断 - 别用
flex或grid包裹表格，打印时它们常退化为不可预测的流式结构
打印 HTML 代码块时标签全丢了怎么办
直接把 <div>hello</div> 放进 <div> 或 <p> 里，浏览器会把它当标签解析，而不是显示成文字。想原样打印出来，必须先转义再包裹。
立即学习“前端免费学习笔记（深入）”；
- 先用 JS 转义关键字符：
<→，<code>>→>，&→& - 外层用
<pre>（保留空白与换行），内层套<code class="html">（语义明确 + 默认等宽） - 打印样式中强制重置：
pre, code { font-size: 10pt; font-family: "SFMono-Regular", Consolas, monospace; margin: 0; padding: 8px; } - 禁用
background-image和阴影，否则部分打印机驱动会跳过整块区域
局部打印该用 CSS 还是 DOM 替换
window.print() 本身不支持局部打印，必须靠外部控制。两种主流方式，风险点完全不同。
- 用
@media print隐藏非目标区域（推荐）：给要打印的容器加id="print-section"，然后写body * { visibility: hidden; }+#print-section, #print-section * { visibility: visible; }；必须用visibility: hidden而非display: none，否则目标区域可能因父容器塌陷而错位 - 用
innerHTML替换body（慎用）：适合简单页面，但在 Vue/React 或含复杂 JS 的页面中极易出问题——事件监听丢失、组件状态断裂、动态插入的<link>样式常丢失；执行后页面会瞬间白屏，用户可能误操作
真正麻烦的不是写几行 CSS，而是浏览器对 @page 和分页属性的支持差异极大：Chrome 可能忽略 orphans，Edge 渲染 @page margin 时偏移 2mm，Firefox 对 position: sticky 在打印中行为不一致。导出 PDF 比直接调用 window.print() 更可控。
