如何用纯HTML创建按钮，按浏览器显示打印网页（排除隐藏块）

问题核心是浏览器默认打印样式不会自动遵循页面的屏幕显示规则，需要通过打印媒体查询来精准控制打印时的元素可见性。

步骤1：标记移动端专属元素 #

先确认页面中那些「仅移动端可见、桌面端隐藏」的元素，给它们统一添加类名（比如mobile-only，如果已有专属类名直接复用即可）。

步骤2：添加打印专用CSS #

在页面的<style>标签中加入以下代码，强制在打印时隐藏这些移动端专属元素：

@media print {
  /* 隐藏仅移动端可见的元素 */
  .mobile-only {
    display: none !important;
  }
  /* 可选：打印时隐藏按钮本身，避免出现在打印内容里 */
  .print-page {
    display: none !important;
  }
}

优化打印按钮（可选） #

虽然<a>标签能实现功能，但用<button>更符合语义，代码可调整为：

<button class="print-page" onclick="window.print()">
  <i class="fas fa-print"></i> Print This Page
</button>

原理说明：@media print是CSS媒体查询规则，仅在浏览器触发打印动作时生效，能让打印内容完全匹配当前桌面浏览器的显示状态。

内容的提问来源于stack exchange，提问作者Ranjit T