要只打印表格内容，需用js临时隐藏非表格元素并触发window.print()，打印后在afterprint事件中恢复布局，同时适配@media print样式并处理ios兼容性问题。
点击按钮只打印表格内容，不打印整页
默认 window.print() 会打印整个页面，但多数场景下你只想打印 <table> 区域。核心思路是临时隐藏其他元素，再触发打印——不是靠 CSS <code>@media print 控制（它无法动态生效），而是用 JS 切换 visibility 或 display。
- 给表格加唯一
id，比如id="print-table" - 打印前遍历所有兄弟元素，设
style.display = 'none'；打印后恢复（注意：window.print()是同步阻塞的，恢复逻辑必须放在afterprint事件里，否则用户还没点“打印”就恢复了） - 别用
visibility: hidden，它仍占布局空间，可能影响分页；必须用display: none - 如果表格在 iframe 里，要确保同源，否则无法操作其 DOM
BUTTON 标签绑定打印逻辑的正确写法
直接写 <button onclick="window.print()"></button> 是错的——它打的是整页。必须封装函数，且避免内联 JS（可维护性差、CSP 可能拦截）。
- HTML 中写：
<button id="print-btn">打印表格</button> - JS 中监听：
document.getElementById('print-btn').addEventListener('click', handlePrint) -
handlePrint()函数里先调用prepareForPrint()隐藏非表格区域，再window.print()，最后注册window.addEventListener('afterprint', restoreLayout) - 不要在
onclick里直接写长逻辑，尤其含异步或 DOM 操作时易出时序问题
打印样式失效？检查这三点
即使 JS 控制了可见性，打印预览里表格错位、边框消失、字体变小，大概率是 CSS 没适配 print 媒体。
- 必须显式声明打印样式：
@media print { table { border-collapse: collapse; } td, th { border: 1px solid #000; } } - 避免用
rem或em设置字体大小，打印机对相对单位解析不稳定，改用pt或px - 背景色默认不打印（浏览器设置里“背景图形”通常关闭），如需打印，加
-webkit-print-color-adjust: exact;和color-adjust: exact;
移动端 Safari 打印按钮点不动？
iOS Safari 对 window.print() 支持有限，部分版本点击无响应，本质是它不暴露原生打印 UI 给网页。
- 检测环境：
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) { alert('请使用 Safari 分享菜单 → “打印”'); } - 不要尝试用
iframe+contentWindow.print()绕过——iOS 上同样无效 - 安卓 Chrome 和桌面端 Chrome/Edge/Firefox 均正常，问题仅集中在 iOS WebKit 内核
最麻烦的其实是分页控制：表格跨页时，thead 不会自动重复。这不是按钮的问题，而是 CSS thead { display: table-header-group; } 在部分浏览器打印中不可靠，得靠后端生成 PDF 来保证一致性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
