最稳方案是css @media print控制显隐+表格加id+按钮用事件监听；需设table{position:absolute}、color-adjust:exact、字体用pt、thead{display:table-header-group}处理分页。
只打印表格，别用 window.print() 直接调用
直接写 <button onclick="window.print()"></button> 会打整页，包括按钮自己、导航栏、广告位——这不是你想要的。真正要的是“仅表格”，必须靠 CSS 媒体查询 + 合理的 DOM 控制配合，而不是靠 JS 删除元素或改 innerHTML。
常见错误是用 JS 把非表格元素 display = 'none' 再 window.print()，但恢复逻辑若放在同步位置（比如 click 回调末尾），用户还没点“打印”就恢复了；而用 afterprint 事件又存在兼容性风险（Safari 旧版不支持）。所以优先走 CSS 路线，更稳定。
- 给表格加唯一
id，例如id="report-table" - 在
<style></style>或外部 CSS 中写：@media print { body * { visibility: hidden; } #report-table, #report-table * { visibility: visible; } #report-table { position: absolute; left: 0; top: 0; } } - 避免用
display: none控制打印可见性——它会导致盒模型塌陷，表格可能错位或分页异常 - 确保表格父容器没有
overflow: hidden或transform，否则visibility在打印时可能失效
@media print 样式里背景色和边框为啥不显示
Chrome/Firefox 默认关闭“背景图形”打印，哪怕你写了 background-color: #fff 或 border: 1px solid #000，预览里也常为空白。这不是 bug，是浏览器为省墨水做的默认策略。
- 强制打印背景色需加两行声明：
color-adjust: exact和-webkit-print-color-adjust: exact - 边框失效常因用了
border-collapse: collapse但没配border: 1px solid到td和th—— 单写table { border }不够 - 字体大小别用
rem或em，打印机解析不稳定；统一用pt（如font-size: 12pt）或px - 如果表格含图片，记得加
max-width: 100%并设height: auto，否则可能横向溢出纸张
按钮绑定用内联 onclick 还是事件监听
写 <button onclick="window.print()"></button> 看似简单，但有三个现实问题：CSP 策略可能拦截、无法控制打印范围、无障碍支持差（屏幕阅读器识别为普通按钮，无语义关联）。
- 推荐写法：
<button id="print-table-btn">打印表格</button>，然后 JS 中：document.getElementById('print-table-btn').addEventListener('click', () => { window.focus(); // 少数环境（如 Electron 或旧 Safari）需要 window.print(); }); - 按钮本身也要隐藏：在
@media print里加#print-table-btn { display: none !important; } - 如果页面用了模块化构建（如 Vite/Webpack），确保这段 JS 在 DOM 加载完成后执行，比如包在
DOMContentLoaded里 - 不要用
<a href="javascript:void(0)"></a>或<a href="#"></a>模拟按钮——语义错误，且可能触发页面跳转
iFrame 方案真能隔离打印区域吗
能，但有条件。iframe 打印本质是把目标 HTML 片段注入空白 iframe，再调用其 contentWindow.print()，从而天然避开主页面样式干扰。但它不是万能解法。
- iframe 必须同源，跨域会抛
SecurityError - 注入内容后必须等
iframe.contentDocument.readyState === 'complete'再调print()，否则可能打空 - iframe 高度若设死（如
height: 0），某些浏览器渲染会卡住；建议用style="position: absolute; width: 0; height: 0; border: 0;" - 比起 CSS 媒体方案，iframe 更重：要构造 HTML 字符串、处理引号转义、丢失原表格的动态状态（如已勾选的 checkbox）
- 除非表格数据来自后端纯静态 HTML，否则不建议日常使用 iframe 方案
实际项目里最稳的路径就一条：CSS @media print 控制显隐 + 表格加 id + 按钮用事件监听。复杂点在于打印分页——长表格跨页时，thead 不会自动重复，得靠 thead { display: table-header-group; } 配合 page-break-inside: avoid 细调，这部分容易被忽略，但用户一打多页就立刻暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
