Javascript 打印HTML内容

我四处看看，我发现有很多人都有同样的问题，但到目前为止还没有解决办法

我正在为学生使用angular 5和angular material的电子学习应用程序，我需要实现的功能之一是打印文档，但我还没有找到一种方法，如果有任何方法可以用angular打印

div

的内容，因为我尝试了这种方法 但是不起作用，因为当我得到DOM元素的innerHTML时，返回html和代码：

                      <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--><article _ngcontent-c18="" class="ng-tns-c18-3 ng-star-inserted" style="">

                        <!--bindings={
  "ng-reflect-ng-if": "false"
}-->


                        <!--bindings={
  "ng-reflect-ng-if": "false"
}-->


                        <!--bindings={
  "ng-reflect-ng-if": "true"
}--><p _ngcontent-c18="" autocorrect="off" draggable="return false;" oncut="return false" ondragover="return false;" ondrop="return false;" onkeypress="return false" onpaste="false" spellcheck="false" class="ng-tns-c18-3 ng-star-inserted" ng-reflect-ng-class="[object Object]" data-block-id="8f5b8d8f-9027-4c40-b7fe-d5ec90334fd9" contenteditable="true">Hallo Zusammen,</p>


                        <!--bindings={
  "ng-reflect-ng-if": "false"
}-->

哈罗·祖萨曼

---

而不是容器的内容，请给我一个错误，如果有任何问题，请告诉我。

我将使用一个可以附加到容器元素的指令。该指令应用适当的样式，以便不打印元素外部的所有内容，而打印元素内部的所有内容

指示

@指令({
选择器：“[打印部分]”，
})
导出类PrintSectionDirective实现AfterViewInit、OnDestroy{
@HostBinding（'class.print节'）private printSection=true；
私有样式：HTMLStyleElement；
公共ngAfterViewInit（）{
this.style=document.createElement（'style'）；
this.style.type='text/css'；
this.style.innerText=`
@媒体印刷品{
正文*{
可见性：隐藏；
}
.打印部分，.打印部分*{
能见度：可见；
}
.印刷部{
宽度：100%；
}
}`;
document.head.appendChild（this.style）；
}
公共恩格德斯特罗（）{
document.head.removeChild（this.style）；
}
}

用法 模板

<div print-section>Print only this content</div>
<button (click)="printThePage()">Print Content</button>

---

此方法的优点是，当不使用指令时，页面仍可以使用默认行为打印，并且当附加指令时，将只打印页面的该部分，并且该部分将适合页面的宽度。

我将使用可以附加到容器元素的指令。该指令应用适当的样式，以便不打印元素外部的所有内容，而打印元素内部的所有内容

指示

@指令({
选择器：“[打印部分]”，
})
导出类PrintSectionDirective实现AfterViewInit、OnDestroy{
@HostBinding（'class.print节'）private printSection=true；
私有样式：HTMLStyleElement；
公共ngAfterViewInit（）{
this.style=document.createElement（'style'）；
this.style.type='text/css'；
this.style.innerText=`
@媒体印刷品{
正文*{
可见性：隐藏；
}
.打印部分，.打印部分*{
能见度：可见；
}
.印刷部{
宽度：100%；
}
}`;
document.head.appendChild（this.style）；
}
公共恩格德斯特罗（）{
document.head.removeChild（this.style）；
}
}

用法 模板

<div print-section>Print only this content</div>
<button (click)="printThePage()">Print Content</button>

---

此方法的优点是，当不使用指令时，页面仍能以默认行为打印，并且当附加指令时，则只打印页面的该部分，并且该部分将适合页面的宽度。

您的意思是将其打印到打印机上吗？是的，将文档打印到打印机上。因此

window.print（）

不执行您想要的操作？不使用

window.print（）

，因为我需要文档的内容是一个特定的

div

容器，当我使用

window.print（）时

我不打印全部内容，但在我的情况下，只打印一个加载元素，用于为应用程序充电。因此，请使用CSS打印媒体，添加一个类，只打印活动的内容。你的意思是将其打印到打印机上吗？是的，将文档打印到打印机上。因此

window.print（）

不做你想做的事？不使用

窗口。print（）

，因为我需要文档的内容是一个特定的

div

容器，当我使用

窗口时。print（）

我不打印全部内容，但在我的情况下只打印一个加载元素，我用它为应用充电。所以使用CSS打印媒体，添加类并仅打印活动的内容