要只打印网页中某个<div>区域，需用@media print配合visibility: hidden/visible控制显隐，避免display: none导致布局偏移；推荐window.focus()后调用window.print()，并在afterprint事件或用户操作中清理打印态，同时注意打印样式适配、字体单位及跨页表格断行处理。

只打印网页中某个 <div> 区域，而不是整页

默认情况下，window.print() 会打印整个页面。要限制打印范围，核心思路是：**临时隐藏其他内容，仅保留目标区域可见**。最可靠的方式不是靠 JavaScript 动态删 DOM，而是用 CSS 媒体查询 + 类控制显隐。

常见错误是直接用 display: none 在普通样式里隐藏非目标区域——这会导致页面一加载就看不见，违背“只在打印时隐藏”的本意。

• 给要打印的容器加一个唯一标识，比如 id="print-section" 或 class="print-target"
• 在 <style> 或 CSS 文件中添加 @media print 规则，隐藏除目标外的所有内容：

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

• 注意：用 visibility: hidden 而不是 display: none，避免因盒模型塌陷导致目标区域位置偏移

window.print() 触发前要不要调用 focus()？

绝大多数现代浏览器不需要。但部分旧版 Safari 或 Electron 封装环境里，若打印弹窗未激活，可能静默失败或弹出空白预览。这时加一句 window.focus() 是低成本保险措施。

• 推荐写法：

  document.getElementById('print-btn').onclick = () => {
    window.focus();
    window.print();
  };

• 不要在 print() 后立即恢复页面状态（比如移除 print 类）——用户可能取消打印，或在打印预览中反复调整，此时页面应保持可打印态
• 如果用了动态 class 控制显隐（如 print-mode），应在 afterprint 事件中清理，但注意该事件兼容性差（IE/Edge 旧版支持，Chrome/Firefox 不稳定），更稳妥的是不自动清理，或由用户操作关闭打印态

打印时样式错乱、字体变小、分页截断怎么办

CSS 在打印上下文中的渲染逻辑和屏幕完全不同：默认禁用背景色、图片可能不显示、flex/grid 布局容易崩、px 单位可能被缩放。关键不是“还原屏幕样式”，而是“适配纸面逻辑”。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

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

• 强制启用背景打印（如需）：

  @media print {
    * {
      -webkit-print-color-adjust: exact;
      color-adjust: exact;
    }
  }

• 避免依赖浮动或绝对定位；用 page-break-inside: avoid 防止单个元素被拆到两页
• 字体大小建议用 pt 或 cm 等物理单位，而非 rem；行高设为固定值（如 line-height: 1.4）比 normal 更可控
• 测试时务必用浏览器的“打印预览”（Ctrl+P），别只看截图——预览才是真实输出依据

Vue/React 项目中如何安全触发局部打印

框架组件的生命周期和 DOM 更新机制会影响打印时机。直接在 ref 元素上调用 print() 可能拿到未渲染完成的节点，尤其含异步数据或动画的区块。

• React 中确保 DOM 已挂载且数据已就绪：

  useEffect(() => {
    const el = document.getElementById('print-section');
    if (el && dataLoaded) {
      // 可在此处准备打印样式，但不立即 print()
    }
  }, [dataLoaded]);

• Vue 3 的 nextTick 是必要步骤：

  const handlePrint = async () => {
    await nextTick();
    window.print();
  };

• 避免在打印逻辑中修改响应式数据（如 showPrintView = true），这会触发重渲染，干扰 @media print 规则的稳定性；应纯用 CSS 类或原生 DOM 操作

实际最难处理的，是跨页表格和长列表的断行控制——page-break-inside: avoid 对 <tr> 无效，必须包裹成 <div> 模拟表格，或用 break-inside: avoid（注意浏览器支持度）。这点容易被忽略，直到用户真的打出来才发现第二页只剩半行表头。