最稳妥方案是使用@media print { .print-hide { display: none !important; } }，务必加!important防止覆盖，且需确保类名在DOM挂载时已存在。
打印时隐藏按钮的 CSS 媒体查询怎么写
关键不是靠 JavaScript 控制显隐，而是用 @media print 主动切断按钮的渲染。浏览器调用 window.print() 时会触发该媒体类型，此时所有匹配的样式立即生效。
常见错误是用 display: none 写在普通样式里——这会让按钮在屏幕和打印里都消失；或者用 JS 在 beforeprint 事件中临时移除元素，但兼容性差（Safari 不支持该事件），且可能因异步导致打印内容不一致。
-
@media print { .print-hide { display: none !important; } }是最稳妥方案 - 务必加
!important：防止组件库或内联样式覆盖 - 类名建议语义化，比如
print-hide或no-print，避免用hidden这类泛义名
按钮上要不要加 onclick="window.print()"
可以加，但要注意副作用：用户点击后触发打印对话框，此时页面尚未应用 @media print 样式（部分浏览器有短暂延迟），可能导致按钮自己出现在打印页里。
更可靠的做法是把打印触发逻辑和样式分离：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 按钮保留
class="print-hide"，确保它永远不出现在打印结果中 - 用独立的打印入口，例如一个带
print-hide的按钮，再配一个不可见但仅用于打印的触发器（如<button id="print-trigger" style="display:none">Print</button>） - JS 中绑定
document.getElementById('print-trigger').click()或直接调用window.print()
window.print() 触发前需要手动清理 DOM 吗
不需要。只要 @media print 规则正确，浏览器会在打印预览生成阶段自动应用对应样式，包括 display: none、visibility: hidden、opacity: 0 等——但只有 display: none 能真正移出文档流，避免留白。
容易被忽略的点：
-
visibility: hidden在打印时仍占位，可能造成页边空白异常 - 背景图、阴影、border-color 等非结构属性默认不打印，无需额外处理
- 如果按钮是通过 Vue/React 动态渲染的，确保其 class 在挂载时已存在，否则媒体查询无法捕获
移动端 Safari 打印按钮失效怎么办
iOS Safari 对 window.print() 支持有限：它不弹出系统打印对话框，而是将当前页转为 PDF 并唤起分享面板。此时 @media print 依然生效，但用户看不到“打印”选项，容易误以为功能坏了。
应对方式很实际：
- 加提示文案，例如
<span class="print-hide">（打印时此按钮将自动隐藏）</span> - 避免依赖纯前端打印，在关键业务场景（如发票）后端生成 PDF 更可靠
- 不要用
ontouchstart替代onclick——Safari 的打印触发仍需明确用户手势，但 click 已足够
document.styleSheets[0].insertRule()，但绝大多数情况，提前写死在 <style> 或外链 CSS 里更稳。 
