HTML打印按钮：如何只打印网页特定区域而隐藏其他元素-html教程-PHP中文网

最稳解法是用@media print配合visibility: hidden隐藏非目标区域，而非删元素或改display；需为打印区域设唯一标识，用visibility: visible恢复其可见性，并加position: absolute防空白占位。

html打印按钮：如何只打印网页特定区域而隐藏其他元素

直接用 window.print() 会打出整页，想只打某个区域，关键不是“选中它”，而是让其余部分在打印时不可见——CSS 媒体查询是最稳的解法。

@media print 隐藏非目标区域（推荐）

这是兼容性最好、无 DOM 变动、不闪屏、不影响交互的方式。核心是用 visibility: hidden 控制显隐，而不是删元素或改 display。

给要打印的容器加唯一标识，比如 id="print-section" 或 class="print-target"

在 <style></style> 或外部 CSS 中写：

@media print {
  body * { visibility: hidden; }
  #print-section, #print-section * { visibility: visible; }
  #print-section { position: absolute; left: 0; top: 0; width: 100%; }
}

必须用 visibility，不用 display: none：后者会让父容器塌陷，导致目标区域错位或空白
position: absolute 是为了防止其他隐藏元素仍占空白高度，影响分页和内容对齐
IE11 / 旧 Edge 不支持 visibility: visible 在子元素上的继承，此时文字可能全黑或不显示——这不是 bug，是渲染引擎差异

print() 前调用 window.focus() 的实际作用

绝大多数现代浏览器不需要手动聚焦，但 Electron 封装应用、某些 Safari 版本、或从 iframe/弹窗触发时，window.print() 可能静默失败或弹出空白预览页。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

加一句 window.focus() 成本极低，且不干扰正常流程
不要放在 setTimeout 里等“页面就绪”，它只对当前窗口有效；如果按钮在 iframe 里，需确保调用上下文是顶层窗口
若用 matchMedia('print').addEventListener 监听打印开始，别依赖它做关键逻辑——Chrome 可能延迟几百毫秒，Safari 在 PDF 导出路径里根本不触发