打印表格必须先克隆节点并注入隐藏iframe，再调用其contentWindow.print()；需附带完整打印样式、清除无关元素、重置style属性，并处理浏览器兼容性问题。
打印前必须先克隆表格节点
直接对原始 <table> 调用 window.print() 会导致样式丢失、分页错乱，甚至整个页面被打印。根本原因是浏览器打印预览会重置 CSS 上下文，而内联样式或外部样式表在打印上下文中可能未加载或被忽略。
正确做法是：在打印前，把目标 <table> 克隆为独立 DOM 片段，注入一个隐藏的 <iframe> 或临时 <div> 中，并附带精简但完整的打印样式（特别是 @media print 规则）。
- 克隆必须用
element.cloneNode(true)，否则事件监听器和动态内容会丢失 - 克隆后要手动移除不需要打印的子元素，比如操作按钮列：
clone.querySelectorAll('td.action, th.action').forEach(el => el.remove()) - 务必重置
style属性，避免原始页面的display: none或visibility: hidden影响打印输出
iframe 打印方案比 window.open 更可靠
用 window.open() 新开窗口再写入 HTML 容易触发弹窗拦截，且跨域 iframe 内容写入受限；而向同源 <iframe> 注入内容并调用其 contentWindow.print() 是目前最稳定的方式。
关键步骤：
立即学习“Java免费学习笔记（深入）”；
- 创建隐藏
<iframe id="print-frame" style="display:none">并 append 到document.body - 获取其
contentDocument，写入包含<style>的完整 HTML 片段（含@media print { * { color: #000 !important; } }） - 调用
iframe.contentWindow.print()后，**不要立即 remove iframe** —— 部分浏览器（如 Safari）需保持 iframe 存活至打印对话框关闭
示例关键代码片段：
const iframe = document.getElementById('print-frame');
const doc = iframe.contentDocument || iframe.contentWindow.document;
doc.open();
doc.write(`
<html><head>
<style>@media print { body { margin: 0; } table { border-collapse: collapse; } }</style>
</head><body>${clone.outerHTML}</body></html>
`);
doc.close();打印样式里必须覆盖 color 和 background-color
很多表格用了浅灰背景色或蓝色文字，但默认打印设置会禁用背景图和非黑文字——结果打印出来全是白底黑字，完全看不出原表格结构。
必须在打印样式中显式声明：
-
color: #000 !important（避免蓝色链接变黑后不可读） -
background-color: #fff !important（防止深色主题下内容“消失”） -
border: 1px solid #000 !important（border-collapse: collapse不足以保证边框可见） - 慎用
background-image：99% 的打印机不渲染它，且会拖慢预览
移动端 Safari 和 Chrome for Android 的兼容陷阱
iOS Safari 对 iframe.contentDocument.write() 支持不稳定，有时写入后 document.body 为空；Android Chrome 则可能因内存限制拒绝打印超大表格（>500 行）。
应对策略：
- 写入后加短延时再调用
print()：setTimeout(() => iframe.contentWindow.print(), 100) - 对长表格做分页控制：用
page-break-inside: avoid在<tr>上，但仅对整行生效；更稳妥的是按行数切片，生成多个打印 iframe - 检测是否支持 iframe 打印：
if (!iframe.contentWindow || !iframe.contentWindow.print) {...}，降级为提示用户「请选中表格后使用 Ctrl+P」
真正麻烦的不是实现，而是不同浏览器对「打印上下文」的初始化时机处理不一致——哪怕 DOM 已写入，contentWindow.print() 仍可能报 TypeError: Cannot read property 'print' of null，这时候只能 retry + fallback。
