如何使用 TS 在 Angular 4 中打印页面答案

【问题标题】：How to print a page in Angular 4 with TS如何使用 TS 在 Angular 4 中打印页面
【发布时间】：2023-04-08 01:15:01
【问题描述】：

我有一个 Web 应用程序，而在某些页面中我需要制作一台打印机来打印该页面，但我有一个侧边栏，其余部分是一个组件的页面，怎么可能只打印这个组件的侧边栏，我在TS里用过这段代码。

print() {
window.print();
}

Html 代码从这个开始。

div class="container">
//Here I have all the HTML source

</div>

【问题讨论】：

How do I hide an element when printing a web page?的可能重复
@baao 你在跟我开玩笑吗，如果你认为它是重复的，请在这里告诉我答案。

标签： html angular typescript

【解决方案1】：

首先为该组件分配一个ID，那么：

const printContent = document.getElementById("componentID");
const WindowPrt = window.open('', '', 'left=0,top=0,width=900,height=900,toolbar=0,scrollbars=0,status=0');
WindowPrt.document.write(printContent.innerHTML);
WindowPrt.document.close();
WindowPrt.focus();
WindowPrt.print();
WindowPrt.close();

【讨论】：

这是可行的，但所有样式都消失了，怎么可能添加样式和其他东西？
在该组件标签中包含这些样式，使用样式属性
你认为在这个 WindowPrt 中？
为 css 制作一个外部 css 文件，在 WindowPrt.document.write(printContent.innerHTML); 之前插入：WindowPrt.document.write('<link rel="stylesheet" type="text/css" href="yourCssFileName.css">');
我从this实现的，你也可以学习

【解决方案2】：

你可以试试这个解决方案。

html文件

<div class="container" id="component1">
//Here I have all the HTML source

</div>

<div class="container" id="component2">
//Here I have all the HTML source

</div>

<button (click)="printComponent('component1')">Print</button>

ts 文件

printComponent(cmpName) {
     let printContents = document.getElementById(cmpName).innerHTML;
     let originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

【讨论】：

您的代码正在打印，但是当我尝试打印或取消时，整个页面都无法正常工作？
是的，我也有同样的问题
打印功能只工作一次，当我再次点击时，点击功能没有被触发。
我也有同样的问题，当我在 console.log 中抛出这个错误：core.js:7187 ERROR TypeError: Cannot read property 'postMessage' of null
不完美，但在这段代码之后我调用：window.location.reload();并且页面至少又活了

【解决方案3】：

在侧边栏组件 scss 文件或 css 文件中...您可以在使用媒体查询打印时将其隐藏：

@media print {
  :host {
    display: none;
  }
}

【讨论】：