如何僅打印畫布內容？

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類。