javascript - 如何只打印Canvas内容？

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 文件上的 Angular 应用程序，因此您可以这样提及

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

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