只打印Angular中modal的内容

Question

我正在尝试打印Angular中ng引导模式的模式内容。模态包含一个表，所以我希望文档以相同的格式打印。我想要这里给出的相同功能，但无法实现。

根据此链接，它在打印期间将body的可见性设置为hidden，并且仅显示模态内容。但在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>

点击按钮，我想打印这个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;
}
}