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

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

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

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

• 给要打印的容器加唯一标识，比如 id="print-section" 或 class="print-target"
• 在 <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 导出路径里根本不触发

innerHTML 替换 body 的风险点

虽然代码看着简单，但在真实项目里极易翻车，尤其含 Vue/React、图表库、表单验证或第三方 SDK 的页面。

立即学习“前端免费学习笔记（深入）”；

• 执行后页面瞬间白屏，用户可能误点其他按钮或刷新
• document.body.innerHTML = ... 会销毁所有事件监听器、组件实例、定时器，且无法自动恢复
• 内联 style、动态插入的 <link>、data- 属性、canvas 图形状态全部丢失
• 某些统计 SDK（如百度统计）或反调试脚本依赖 document.body 存在，替换后直接报错或中断上报
• 若原页面用了 document.write 或 eval 初始化逻辑，替换后这部分永远不会再执行

真正麻烦的不是怎么写那几行 CSS，而是得想清楚：目标区域是否含动态渲染内容？是否依赖全局样式或 JS 状态？要不要适配 IE？这些细节一漏，打印出来就是空白、错位或缺样式——而问题往往只在用户按下 Ctrl+P 时才暴露。