如何仅打印画布内容？

Question

我正在Angular 5中开发pdfviewer。我的html页面如下所示：

pdf内容是使用canvas元素显示的。 以下代码段用于打印按钮。

 <button (click)="print()" title="Print" > <span data-l10n-id="print_label">Print</span> </button> 

 print(){ window.print(); } 

当我单击时，它现在正在打印整个页面。

我只想打印pdf内容，而不要打印整个hmtl页面。 有什么办法吗？

提前致谢！！

Answer 1

您可以添加用于打印网页的CSS文件

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

在此css文件中，您可以隐藏不想在打印时显示的元素。

或者不建议您在打印之前隐藏元素

更新由于它在您的css文件上有角度的应用程序，您可以像这样提及

@media print{
  .no-print{
    display: none;
  }
}

然后，您可以在每个不想打印的元素上添加no-print类。