Angular 4 - 我的应用程序在使用 window.print() 打印 Material MDDialog 组件的 html 文档后冻结答案

【问题标题】：Angular 4 - my app freezes after printing html document of Material MDDialog component using window.print()Angular 4 - 我的应用程序在使用 window.print() 打印 Material MDDialog 组件的 html 文档后冻结
【发布时间】：2017-08-16 14:20:44
【问题描述】：

我正在尝试使用打印 Material MDDialog 组件的 html 文档 window.print() 如代码中所示，它工作正常，但是当打印窗口关闭时问题开始了，之后没有任何工作并且我的应用程序冻结我的意思是没有任何工作（关闭对话框，单击链接。 ..) 我认为问题在于更改正文标签 innerHTML 但不知道如何解决？

export class someClass {

@ViewChild('printContent') printContent;

    printDocument() {
        const restorePage = document.body.innerHTML;
        const content = this.printContent.nativeElement.innerHTML;
        document.body.innerHTML = content;
        window.print();
        document.body.innerHTML = restorePage;

      }
}

【问题讨论】：

你不想打印的内容不能加display: none吗？我相信浏览器足够聪明，可以理解他们不需要打印那部分。
我正在尝试只打印 Material MDDialog 的 html 文档而不是整个页面，请您给我更多描述
我的意思是：就在window.print() 之前，隐藏您不想打印的所有内容。之后，再次显示。
我在这个页面中有 100 个内容你的意思是我应该一个一个地隐藏或者有一些 javascript 的解决方案 FYI 我的代码有什么问题我的代码有什么解决方案吗？
你可以创建一个 css 类：body.print-mode * :not[.printable] { display: none; }。将printable 类添加到要打印的元素中。在调用window.print() 之前将print-mode 类添加到您的body 标记中，然后将其删除。那应该隐藏所有没有.printable的元素。

标签： javascript html css angular typescript

【解决方案1】：

你应该添加一个 CSS 声明：

@media print {
  .hidden-print {
    display: none !important;
  }
}

为所有要隐藏打印机的元素提供此类。在您的printDocument 函数中，您只需要window.print()。

@media print 用于打印机上下文，并内置在 css 中。声明本身是Bootstrap内置的，所以如果你使用Bootstrap，你只需要给元素添加hidden-print类，你不需要自己定义。

【讨论】：

是的，我在执行此代码document.getElementsByTagName('body')[0] .classList.add('hidden-print'); window.print(); 后 使用 Bootstrap 正在打印空白页，而且，正如您在上面提到的 cmets body.print-mode * :not (.printable) { display: none !important; } 中的解决方案一样，它不起作用。
你不需要document.getElementsByTagName('body')[0] .classList.add('hidden-print');，直接添加到你的html中即可。你仍然得到一个空白页？

【解决方案2】：

我通过将打印模式下的 css 样式添加到原始 Material MDDialog 潜水来解决了这个问题，如下面的代码所示。如果有人想在打印 MDDialog 组件内容之后在 MDDialog 中预览要打印的页面，此代码将很有帮助。感谢@Jeff Huijsmans 的帮助。

@media print {
  body.print-mode > *:not(.printable) {
    visibility: hidden !important;
    padding: 0px !important;
    margin: 0px !important;
  }
  body.print-mode {
    padding: 0px !important;
    margin: 0px !important;
  }

  .printable {
    padding: 0px !important;
    margin: 0px !important;
    width: 100% !important;
  }
  .mat-dialog-container {
    max-width: none !important;
    width: 100%;
    height: 100%;
  }

  }
  .printable {
    position: absolute !important;
    overflow:visible !important;
    visibility: visible !important;
  }
  .cdk-overlay-container{
    padding: 0px !important;
    margin: 0px !important;
    width: 100% !important;
    position: absolute !important;
    overflow:visible !important;
    visibility: visible !important;
  }
  .cdk-overlay-pane{
    padding: 0px !important;
    margin: 0px !important;
    width: 100% !important;
  }
}

【讨论】：