如何在Angular中实现仅打印页面指定Div内容？

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

这种方式通过CSS控制打印时的元素可见性，只保留目标表格区域，操作简单且不影响页面原有逻辑。

1. 给目标区域添加ID
   修改HTML，为包含表格的容器添加唯一ID，比如给<div class="card">加上id="print-target"：

<div class="card" id="print-target">
  <!-- 原有card内容（包含表格） -->
</div>

2. 添加打印专用CSS
   在组件的styles或全局样式文件中添加以下代码：

@media print {
  /* 隐藏页面所有元素 */
  body * {
    visibility: hidden;
  }
  /* 仅显示目标区域及其子元素 */
  #print-target, #print-target * {
    visibility: visible;
  }
  /* 将目标区域定位到页面顶部，消除多余空白 */
  #print-target {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  /* 隐藏打印按钮本身 */
  .btn-secondary.mb-2 {
    display: none !important;
  }
  /* 若有侧边栏，添加此规则隐藏它 */
  .sidebar { /* 替换成你侧边栏的实际类名/ID */
    display: none !important;
  }
}

3. 保留原有TS代码
   无需修改printPage方法，直接调用window.print()即可：

printPage() {
  window.print();
}

方法二：创建临时窗口打印指定内容 #

如果需要完全独立的打印样式，或者避免页面样式干扰，可以通过创建临时窗口复制目标内容后打印。

1. 给目标区域添加ID
   同方法一，为表格容器添加id="print-target"。

2. 修改TS打印方法
   替换原有printPage方法：

printPage() {
  const printTarget = document.getElementById('print-target');
  if (!printTarget) return;

  // 创建新窗口
  const printWindow = window.open('', '', 'width=800,height=600');
  if (!printWindow) {
    alert('浏览器弹窗被拦截，请允许弹窗后重试');
    return;
  }

  // 写入包含样式的HTML内容（可自定义打印样式）
  printWindow.document.write(`
    <html>
      <head>
        <title>Portfolio Securities</title>
        <!-- 引入Bootstrap保证表格样式正常 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
        <style>
          /* 自定义打印样式 */
          body { padding: 20px; }
          table { margin: 0 auto; width: 100%; }
          .uppercase-title { font-weight: bold; }
        </style>
      </head>
      <body>
        <!-- 复制目标区域内容 -->
        ${printTarget.innerHTML}
      </body>
    </html>
  `);

  // 完成文档加载后触发打印
  printWindow.document.close();
  printWindow.focus();
  setTimeout(() => {
    printWindow.print();
    printWindow.close();
  }, 500);
}

两种方法对比 #

• 方法一：代码量少，依赖页面现有样式，适合打印样式与页面一致的场景，无需处理弹窗权限问题。
• 方法二：样式独立可控，不受页面其他元素干扰，但需要处理浏览器弹窗拦截情况。

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