Angular 4+TS页面打印问题：如何仅打印组件而不打印侧边栏

嗨，这种打印需求太常见啦，我给你分享两种靠谱的方案，帮你只打印组件内容、排除侧边栏：

方法一：用CSS打印媒体查询（首推） #

这是最简洁高效的方案，不需要改动太多JS代码，靠CSS就能精准控制打印时的元素显示。

具体步骤：

1. 先给你的侧边栏元素加个明确的类名（比如sidebar，如果已经有类名直接用就行）
2. 在样式文件里添加打印专用的媒体查询规则：

@media print {
  /* 打印时隐藏侧边栏 */
  .sidebar {
    display: none !important;
  }
  /* 让要打印的container占满打印页面宽度，避免留白 */
  .container {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* 可选：如果还有导航栏、页脚这类不需要打印的元素，也一起隐藏 */
  .navbar, .footer {
    display: none !important;
  }
}

3. 你的TS代码完全不用改，保持原来的就行：

print() { 
  window.print(); 
}

当你调用print()触发打印时，浏览器会自动加载这套打印样式，侧边栏会被隐藏，只打印container里的内容。

方法二：动态克隆目标内容再打印 #

如果你的页面结构比较复杂，或者需要更灵活的打印控制，可以用JS动态克隆要打印的内容，临时创建一个独立的打印容器：

print() {
  // 找到要打印的container元素
  const contentToPrint = document.querySelector('.container')?.cloneNode(true);
  if (!contentToPrint) return; // 找不到内容就直接返回

  // 创建临时打印容器
  const printContainer = document.createElement('div');
  // 设置临时容器的样式，确保打印效果正常
  printContainer.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    padding: 20px;
    z-index: 9999;
    margin: 0;
  `;

  // 把克隆的内容放进临时容器，再添加到页面
  printContainer.appendChild(contentToPrint);
  document.body.appendChild(printContainer);

  // 触发打印
  window.print();

  // 打印完成后移除临时容器（加个小延迟避免打印还没完成就删掉）
  setTimeout(() => {
    document.body.removeChild(printContainer);
  }, 100);
}

这种方法的优势是完全隔离了打印内容和页面其他元素，不会受页面原有样式干扰，但要注意克隆内容的样式继承问题，必要时可以给克隆的内容单独加样式。

小技巧 #

• 测试打印效果不用真的打印，用浏览器的「打印预览」（Ctrl+P）就能快速查看结果
• 如果打印内容需要分页，可以在CSS里用page-break-before: always;或page-break-after: always;来控制分页位置

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