Javascript 仅打印角度模式的内容

我试图打印ng引导模式的模式内容。模式包含一个表，因此我希望文档以相同的格式打印。我想要相同的功能，但无法实现它

根据此链接，它在打印期间将

正文

的可见性设置为

隐藏

，并仅显示模式内容。但在Angular中，我们使用组件，因此设置

body:hidden

不起作用。它打印出整个文档（模式以及我不想要的背景组件、页眉和页脚）

我已经遵循了很多解决方案，但无法做到这一点

我还尝试将可打印的模式内容附加到新窗口，但写入新窗口只需要字符串。我在模态中使用表格，所以我希望打印相同样式的表格

我怎样才能做到这一点

编辑1：这是我要打印的模式内容：

<div id="printable">
    <div class="row shipping">
      <div class="col-4">
        <h6>SHIPPING ADDRESS</h6>
        <p>
          {{ this.order.shipName }} : {{ this.order.addrLine1 }},
          {{ this.order.area1 }}, {{ this.order.area2 }},
          {{ this.order.countryCode }} - {{ this.order.pin }}
        </p>
      </div>
      <div class="col-4">
        <h6>SHIPPING METHOD</h6>
        <p>Standard</p>
      </div>
      <div class="col-4">
        <h6>ACCOUNT PAID</h6>
        <p>Paypal Account: {{ this.order.order.payerEmail }}</p>
      </div>
    </div>
    <br /><br />
    <div class="card">
      <table>
        <tr>
          <th>ITEM</th>
          <th>DETAILS</th>
          <th>QTY</th>
          <th>TOTAL</th>
        </tr>
        <tr>
          <td>
            <img
              [src]="this.order.order.image"
              style="height: 70px; width: 70px"
            />
          </td>
          <td>
            {{ this.order.order.category }}
          </td>
          <td>{{ this.order.order.quantity }}</td>
          <td>${{ this.order.order.amtPaid }}</td>
        </tr>
      </table>
    </div>
    <br />
    <div class="row" style="padding-bottom: 20px">
      <div class="col-8"></div>
      <div class="col-md-4">
        <h5>
          <b>ORDER TOTAL</b> : <span>${{ this.order.order.amtPaid }}</span>
        </h5>
        <br />
      </div>
    </div>
  </div>
</div>

在css中：

@media screen {
  #printSection {
      display: none;
  }
}

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

---

谢谢

无需克隆js代码，所有这些都只是代码中的css更改

onPrint() {
      window.print();    
    }

为了隐藏超出组件范围的页眉、页脚和其他内容，必须将其写入全局css文件，即

style.css

/*
从组件级css移动到style.css
此处不需要隐藏，因为屏幕上显示了相同的内容
@媒体屏幕{
#可打印{
显示：无；
}
} */
@媒体印刷品{
正文*{
可见性：隐藏；
}
#可打印，#可打印*{
能见度：可见；
}
#可打印{
位置：绝对位置；
左：0；
排名：0；
}
}

将您的代码放在这里，以便我们提供解决方案。除非您这样做，否则我们不能建议任何代码更改或更改fixes@HitechHitesh我已经添加了代码。请现在回顾它的工作就像一个魅力！非常感谢你。我应该在全局文件中设置css。

@media screen {
  #printSection {
      display: none;
  }
}

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

onPrint() {
      window.print();    
    }