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

Posted 2023-03-13

【中文标题】如何使用 TS 在 Angular 4 中打印页面

【英文标题】：How to print a page in Angular 4 with TS

【发布时间】：2018-11-07 03:14:13

【问题描述】：

我有一个 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 你在跟我开玩笑吗，如果你认为它是重复的，请在这里告诉我答案。

【参考方案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;