仅打印 Angular 中模态的内容

Question

我正在尝试在 Angular 中打印 ng-bootstrap 模态的模态内容。模态包含一个 table ，所以我希望文档以相同的格式打印。我想要给定的相同功能 here 但无法实现。

根据此 link，它在打印期间将 body 的可见性设置为 hidden，并且仅显示模态内容。但是在 Angular 中，我们使用组件，因此设置 body: hidden 不起作用。它打印出整个文档（模态以及我不想要的背景组件、页眉和页脚）。

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

我也试过将 printable 模式内容附加到新的 window 但写入新的 window 只需要字符串。我在模态中使用 table 所以我想要相同样式的 table 来打印。

我怎样才能做到这一点？

编辑 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>

单击按钮时，我想按原样打印此 div 内容

<div class="modal-footer" id="non-printable">
    <button type="button" class="btn btn-primary" (click)="onPrint()">
      Print Receipt
    </button>
    <button
      type="button"
      class="btn btn-secondary"
      (click)="modal.dismiss('cancel click')"
    >
      Cancel
    </button>
  </div>

打印模态内容的方法：

onPrint() {
    var elem = document.getElementById("printable");
    var domClone = elem.cloneNode(true)
    var $printSection = document.getElementById("printSection");

    if (!$printSection) {
      let $printSection = document.createElement("div");
      $printSection.id = "printSection";
      document.body.appendChild($printSection);
      $printSection.innerHTML = "";
      $printSection.appendChild(domClone);
      window.print();    // only modal content should get print
    }
  }

在css中：

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

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

谢谢

Answer 1

无需克隆 js 代码，只需 css 更改代码即可

onPrint() {
      window.print();    
    }

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

/*  
move from component level css to style.css
Here hiding is not required as the same is been displayed on screen

@media screen {
  #printable {
      display: none;
  }
} */

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

仅打印 Angular 中模态的内容

Print only the contents of modal in Angular

javascript

modal-dialog

ng-bootstrap

angular