直接调用window.print()会打印乱码，是因为浏览器默认将屏幕样式“截图式”输出，未适配纸张尺寸、分页逻辑及打印渲染规则；必须通过独立、高优先级的@media print规则重写布局，清除浮动、禁用溢出、避免跨页断裂、重置颜色背景、统一字体单位，并在打印预览中调试验证。
为什么直接调用 window.print() 会打出一坨乱码
因为浏览器默认把整个页面“截图式”输出，导航栏、浮动广告、背景图、flex布局全照搬，纸张上不是文字糊成一团，就是表格被硬生生劈开两页。这不是 bug，是你没告诉浏览器：“打印时请换一套规则”。@media print 不是可选项，是唯一入口——不写它，等于没做打印适配。
@media print 必须独立包裹且优先级压过屏幕样式
常见错误是把打印规则塞在主 CSS 文件末尾，结果被 .container { width: 1200px; } 这类通用规则覆盖；更糟的是用多个 <link> 分散加载，部分规则根本没进渲染树。必须满足以下任一条件：
- 用
<link rel="stylesheet" media="print" href="print.css">单独引入，最稳妥 - 若内联书写，
@media print { }块必须放在所有屏幕样式之后，且不能嵌套在其他媒体查询里 - 页面含
<iframe>？父页的@media print不会穿透生效，需在 iframe 内单独定义
表格跨页断裂、表头消失、列宽崩坏的三个硬解法
长表格打印最常翻车：第一页有 <thead>，第二页只剩半截 <tr>，还带错位边框。根源是浏览器打印引擎对 flex/grid 和隐式 display 值支持极弱。
- 给
<table>加page-break-inside: avoid;，防止整表被拆（Chrome/Firefox 支持良好） - 显式声明
thead { display: table-header-group; }和tfoot { display: table-footer-group; }，别依赖浏览器自动处理 - 禁用 flex/grid 包裹表格容器，一律设为
display: block; width: 100% !important;，再加border-collapse: collapse;
字体、单位、颜色怎么设才不糊不缩放失真
中文打印崩在字体上：用了 Web Font，预览变方块；字号用 rem 或 %，不同浏览器换算出的物理尺寸差一大截。
立即学习“前端免费学习笔记（深入）”；
- 正文字体栈强制用系统安全字体：
font-family: "Microsoft YaHei", SimSun, sans-serif; - 字号统一用
pt（如font-size: 12pt;）或mm，禁用em、rem、% - 加
-webkit-print-color-adjust: exact; color-adjust: exact;强制打印背景色和图片（注意兼容性） -
<pre>和<code>块必须指定等宽字体：font-family: "Courier New", monospace;
