如何仅打印画布内容？

Question

I'm developing a pdfviewer in Angular 5. My html page looks like this: 我正在Angular 5中开发pdfviewer。我的html页面如下所示：

pdf content is showed using canvas element. pdf内容是使用canvas元素显示的。 Below snippet is for print button. 以下代码段用于打印按钮。

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

 print(){ window.print(); }

When I click it is printing whole page right now.Like bolow: 当我单击时，它现在正在打印整个页面。

I want to print only pdf content instead of whole hmtl page. 我只想打印pdf内容，而不要打印整个hmtl页面。 Is there any way to do that? 有什么办法吗？

Thanks inadvance!! 提前致谢！！

Answer 1

You can add a css file which is for printing the webpage 您可以添加用于打印网页的CSS文件

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

In this css file you can hide the elements you dont want to show while printing. 在此css文件中，您可以隐藏不想在打印时显示的元素。

or you can hide the element before printing not recommended 或者不建议您在打印之前隐藏元素

UPDATE Since its an angular application on your css file you can mention like this 更新由于它在您的css文件上有角度的应用程序，您可以像这样提及

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

and then you can add no-print class on each element which you do not want to print. 然后，您可以在每个不想打印的元素上添加no-print类。