window.print() 默认打印整个页面，因它抓取完整dom树；解决关键是用@media print精准控制显示范围，仅保留目标元素并隐藏其余部分。
为什么直接调用 window.print() 会把整个页面都打出来
因为 window.print() 本身不识别“局部”概念，它只抓当前 document.body 的完整 DOM 树。导航栏、按钮、广告位、JS 动态插入的提示框——全都会进打印预览。这不是 bug，是设计如此。
真正要解决的不是“怎么触发打印”，而是“怎么让浏览器在打印时只看到你想让它看到的部分”。核心路径只有一条：@media print 规则必须生效，且优先级压过其他样式。
- 别指望靠 JS 临时删 DOM（比如
innerHTML替换）来“模拟局部”——Vue/React 页面会断状态，第三方统计脚本可能报document.write is not defined，用户看到白屏几秒，体验直接崩 -
display: none是唯一安全的隐藏方式；visibility: hidden或opacity: 0仍占布局空间，打印引擎可能把它算进分页，导致目标表格错位或被截断 - 确保
@media print块写在主 CSS 文件末尾，或通过<link rel="stylesheet" media="print">单独加载——如果它被 Bootstrap 或 Tailwind 的通用规则覆盖，就等于没写
怎样用 @media print 精准控制表格打印范围
关键不是“显示表格”，而是“隐藏其余所有东西”。给表格加 class 如 print-table，再配合全局隐藏策略，比逐个写 .no-print 更可靠。
推荐写法（放在 <style></style> 或外部 CSS 中）：
@media print {
body * {
display: none;
}
.print-table, .print-table * {
display: block;
}
.print-table {
width: 100% !important;
page-break-inside: avoid;
}
}
- 必须用
display: none，不是visibility: hidden—— 后者在打印中仍可能被渲染出空白占位 -
.print-table *确保表格内部元素（th,td,thead）也恢复显示，否则可能只打出空壳 -
page-break-inside: avoid加在.print-table上，而不是tr—— 浏览器对tr的该属性基本无视
表格跨页时表头消失、边框丢失怎么办
这是打印引擎的默认行为：它不自动重复 <thead>，也不继承屏幕样式里的 <code>border 和 padding。你得显式告诉它“这些必须存在”。
补全这三段规则，缺一不可：
@media print {
thead {
display: table-header-group;
}
table, th, td {
border: 1px solid #000 !important;
border-collapse: collapse !important;
}
th, td {
padding: 4pt 6pt !important;
background-color: #fff !important;
}
}
-
thead { display: table-header-group }是跨页重复表头的唯一标准方案；Safari 和旧 Edge 对此支持较弱，但仍是目前最兼容的写法 - 边框必须分别给
table、th、td单独声明!important，仅设table { border-collapse: collapse }不够 - 单位用
pt（如4pt）而非rem或%—— 打印时物理尺寸必须稳定，不同设备换算误差会直接导致列宽错乱
调试时 Chrome DevTools 的 “Emulate CSS media: print” 为什么不准
它只改视觉渲染，不跑真实分页引擎。你看到表格“完整显示”，不代表打印预览里不会被劈成两半；你看到背景色“正常”，不代表实际打印时不会被省墨策略抹掉。
真正有效的验证方式只有两个：
- 每次改完 CSS，必须手动按
Ctrl+P（Windows）或Cmd+P（macOS）打开真实打印预览，看分页、表头、边框是否符合预期 - 如果页面含
<iframe></iframe>，父页的@media print完全不影响 iframe 内容——它的打印样式必须单独定义在 iframe 的文档内 - 在线工具（CodePen/JSFiddle）里写的
@media print很可能无效，因为它们把代码塞进 iframe 渲染；本地 HTML 文件才是唯一可信调试环境
最常被忽略的一点：打印样式不是“锦上添花”，它是独立于屏幕渲染的另一套通道。写错权重、漏掉 !important、用了不支持的 display 值（比如 flex 包裹表格），问题不会报错，只会静默失效——只能靠真实预览肉眼确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
