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

Question

我有一个Web应用，在某些页面上需要打印该页面，但是我有一个侧栏和另一个组件的页面部分。有什么方法可以只打印这个组件而不是侧栏？我已经在TypeScript中使用了这段代码。

print() {
window.print();
}

Html代码从这里开始。

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

</div>

- TheCoderGuy

---

可能是重复的问题如何在打印网页时隐藏元素？ - baao

@baao 你在跟我开玩笑吗？如果你认为这是重复的，请在这里展示答案。 - TheCoderGuy

Answer 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();

- Mohd Tabish Baig

---

使用style属性在组件标签中包含那些样式。 - Mohd Tabish Baig

对于CSS，你需要创建一个外部CSS文件，并在WindowPrt.document.write(printContent.innerHTML);之前插入以下内容：WindowPrt.document.write('<link rel="stylesheet" type="text/css" href="yourCssFileName.css">'); - Mohd Tabish Baig

我是从这里实现的，你也可以学习。 - Mohd Tabish Baig

如何将数据打印在单个页面上？ - Alekya

@Mohd Tabish Baig先生，我收到了WindowPrt null。 - Kapil Soni

Answer 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;
}

- Krishna Rathore

---

你的代码可以正常打印，但是当我尝试打印或取消时，整个页面都无法工作？ - TheCoderGuy

是的，我有同样的问题。 - Alekya

打印函数只能工作一次，当我尝试再次点击时，点击函数不会被触发。 - Philip Mutua

我有同样的问题，当我使用console.log时，它会抛出这个错误：core.js:7187 ERROR TypeError: Cannot read property 'postMessage' of null。 - Emmon

不是很完美，但在这段代码之后我调用了：window.location.reload(); 然后页面至少又活过来了。 - Kibi

你好，这段代码可以创建页面，但表单内的文本为空，整个页面也变成了空白。有没有人遇到过这个问题并解决了呢？ - Julio Perez

Answer 3

在侧边栏组件的 SCSS 文件或 CSS 文件中，您可以使用媒体查询在打印时隐藏它：

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

- Ajay Reddy

Answer 4

在 TypeScript 中没有直接的窗口打印函数，我们需要创建一个新的 print() 函数，并在该函数中编写 JavaScript 打印函数，如下所示。

<div click("print()")class="container">
</div>

在 Ts 文件中

print() {
window.print();
}

- Yashwanth