使用data-print属性标记可打印区域比class更可控，能避免样式冲突、便于js精准提取；打印前需手动清理干扰dom；@media print中必须重置position和float；移动端safari等不支持window.print()需降级处理。
用 data-print 属性标记可打印区域，比 class 更可控
直接靠 class="no-print" 隐藏非内容区是常见做法，但容易和现有样式冲突，尤其当框架或组件库已定义了同名 class。用自定义属性如 data-print="true" 显式声明“这是我要打的内容”，逻辑更干净，也方便 JS 后续提取。
示例：把表单主体包裹进一个带属性的容器里
<div data-print="true"> <h2>客户信息</h2> <p>姓名：张三</p> <p>订单号：ORD-20260607</p> </div> <button class="print-btn">打印</button>
后续 JS 可以精准定位：document.querySelector('[data-print="true"]')，避免误选其他隐藏元素。
window.print() 前必须手动清理干扰 DOM
浏览器不会自动忽略按钮、弹窗遮罩、动态加载的广告位——哪怕它们在屏幕上看不见。只靠 CSS @media print { .btn-print { display: none; } } 不够，因为：
-
visibility: hidden或opacity: 0的元素仍参与分页计算，可能生成空白页 - 某些
position: fixed元素（如页脚水印）会在每页重复渲染 - 未关闭的 modal、tooltip 的 DOM 仍在 document 中，会被一并塞进打印流
推荐做法是打印前临时移除或隐藏干扰节点：
function printPage() {
const printArea = document.querySelector('[data-print="true"]');
const originalHTML = printArea.innerHTML;
<p>// 移除所有非 data-print 元素的兄弟节点（保留结构干净）
Array.from(printArea.parentNode.children)
.filter(el => !el.hasAttribute('data-print'))
.forEach(el => el.remove());</p><p>window.print();</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a>
<p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><p>// 打印后还原（注意：window.print() 是同步触发，但回调不可靠）
setTimeout(() => {
printArea.innerHTML = originalHTML;
}, 100);
}</p>
@media print 里必须重置 position 和 float
很多页面用 float: left 布局侧边栏，或用 position: absolute 叠加操作按钮。这些在打印时几乎必然导致内容重叠、错位甚至消失。
不能只写 .sidebar { display: none; } 就完事——父容器的 float 或 position 还在生效，会影响剩余内容流。
务必在 @media print 中全局重置：
@media print {
* {
position: static !important;
float: none !important;
overflow: visible !important;
}
body {
margin: 0;
padding: 0;
}
}
否则即使你只打 data-print 区域，它的父级若仍为 float，整个区块可能被挤出纸张边界。
移动端 Safari 和部分 Android WebView 不响应 window.print()
这不是代码写错了，而是平台限制。iOS 16+ 的 Safari 完全忽略 window.print() 调用，不报错也不弹窗；部分旧版 Android WebView 也返回 undefined。
检测和降级方案必须写死：
if (typeof window.print === 'function') {
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
alert('当前设备不支持直接打印，请长按页面选择“分享→PDF→存储到文件”，再用其他应用打印');
} else {
window.print();
}
} else {
// fallback：生成 PDF（需引入 jsPDF + html2canvas）
}
别指望用户自己发现“点不动”，也别依赖 matchMedia('print').matches 监听——它只在打印对话框打开后才变 true，无法用于前置判断。
真正难的不是让内容出来，而是让每一页都刚好装下一段完整表格、不让标题孤零零挂在页尾、也不让图片被切成两半。这些细节得靠 page-break-inside: avoid 和反复预览来调，而不是靠一次配对属性就解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
