当父容器设置 `visibility: hidden` 时，其子元素默认不可见且无法打印；但通过 `@media print` 覆盖该样式，可实现在屏幕隐藏、打印时显示的精准控制。

在 Web 开发中，visibility: hidden 与 display: none 的行为有本质区别：前者保留文档流中的空间（即占位），后者则完全脱离布局。若你希望某区块在页面上“隐形但留空”，同时又能在用户触发 Ctrl+P 打印时正常呈现，直接在内联样式中写死 visibility: hidden 会导致打印样式无法生效——因为内联样式的优先级高于普通 CSS 规则，而 @media print 中的类选择器默认无法覆盖它。

✅ 正确做法是将可见性控制交由 CSS 类管理，并在打印媒体查询中主动重置：

<div class="d-print-block mt-2 hide-for-print">
  <div class="col-12">
    <div>This is hidden but needs to be printed</div>
  </div>
</div>

.hide-for-print {
  visibility: hidden;
}

@media print {
  .hide-for-print {
    visibility: visible !important; /* 可选：确保高优先级 */
  }
}

? 关键说明：

Java 接口排错助手

在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。

下载

• 移除内联 style={{ visibility: 'hidden' }}，改用语义化类名（如 .hide-for-print），便于样式复用与维护；
• @media print 中的规则会自动在浏览器打印预览或实际打印时生效，无需 JavaScript 干预；
• 若存在其他高优先级样式干扰，可添加 !important 提升打印样式权重（但应谨慎使用）；
• 注意：visibility: visible 仅恢复可见性，不改变布局——该元素在打印页中仍保持原有尺寸和位置，符合“占位但隐藏”的原始需求。

? 补充提醒：Bootstrap 的 d-print-block 类仅控制 display 属性（如设为 block），它不能解除 visibility: hidden 的隐藏效果，因此必须配合 @media print 显式重置 visibility。这是开发者常忽略的细节。

综上，结构化分离“屏显逻辑”与“打印逻辑”，是实现精细打印控制的专业实践。