应使用@media print配合display: none精准隐藏非目标区域，而非动态修改dom；需提前加载打印样式，避免用visibility: hidden或复杂选择器，并确保打印后页面样式正常恢复。
点击按钮只打印指定区域内容
默认 window.print() 会打印整个页面，要限制范围，核心是用 CSS 的 @media print 配合可见性控制。不能靠 JS 删除 DOM 或隐藏元素再打印——那样会破坏页面状态，且部分浏览器（如 Chrome）在打印预览阶段已锁定样式，动态改 display 可能无效。
实操建议：
- 给要打印的容器加唯一
id（如id="print-section"），其他区域统一用 CSS 在打印时隐藏 - 在
中添加<style></style>块，或外链 print.css，确保样式在打印前就加载完成 - 避免用
visibility: hidden，它仍占布局空间，应使用display: none
@media print 中如何精准隐藏非目标区域
不能简单写 body * { display: none } 再单独显示目标区域——这会误杀 <select></select>、<input> 等表单控件的可打印值（部分浏览器不渲染它们的内容）。更稳妥的方式是「显式隐藏」无关区块。
示例 CSS：
@media print {
body > *:not(#print-section),
#print-section ~ * {
display: none !important;
}
#print-section {
display: block !important;
position: static !important;
}
}
注意点：
-
!important是必要的，防止页面原有样式干扰 - 避免用
nth-child或复杂选择器，某些打印引擎解析能力弱 - 如果页面有固定定位的导航栏（
position: fixed），需额外加header, nav, .sidebar { display: none }
按钮触发打印的 JS 写法与兼容性细节
按钮本身只需调用 window.print()，但必须确保 CSS 已生效。不要在点击时才动态插入 <style></style> —— Safari 和旧版 Edge 可能来不及应用样式就弹出打印对话框。
推荐写法：
- 把 print 样式提前写死在 HTML
里，或作为<link rel="stylesheet" media="print"> - 按钮
onclick直接执行window.print()，无需额外 JS 控制显隐 - 若需兼容 IE11，避免使用 CSS 变量或
grid布局控制打印区域，老浏览器可能完全忽略
一个最小可用按钮示例：
<button onclick="window.print()">打印当前内容</button>
打印后页面样式恢复异常怎么办
常见现象：打印完页面某些区域仍不可见，或字体变小。这是因为部分浏览器（特别是 Chrome）在打印结束后不会自动重载或重绘所有样式，尤其当用了 !important 强制隐藏后。
解决思路：
- 不要依赖打印回调（
afterprint事件支持度差，Firefox 已弃用） - 把打印专用样式限定在
@media print内，不污染屏幕样式 - 如果必须动态控制，可在打印前用
document.body.classList.add('printing')，然后在@media print里写.printing *:not(#print-section) { display: none }，但需确保 class 在打印前已存在
最省心的做法：样式全静态，不靠 JS 切换，打印就是一次纯 CSS 范围过滤。实际项目中，这个“静态”约束反而比各种钩子更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
