小编Pra*_*rma的帖子

在 Angular 中仅打印模态的内容

我正在尝试在 Angular 中打印 ng-bootstrap 模态的模态内容。该模式包含一个表格,因此我希望以相同的格式打印文档。我想要这里给出的相同功能,但无法实现它。

根据此链接,它设置打印期间的可见性bodyhidden仅显示模态内容。但在 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> …
Run Code Online (Sandbox Code Playgroud)

javascript modal-dialog ng-bootstrap angular

1
推荐指数
1
解决办法
8340
查看次数

标签 统计

angular ×1

javascript ×1

modal-dialog ×1

ng-bootstrap ×1