How to print only Canvas content?

Question

I'm developing a pdfviewer in Angular 5. My html page looks like this:

pdf content is showed using canvas element. 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. Is there any way to do that?

Thanks inadvance!!

Answer 1

You can add a css file which is for printing the webpage

<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.

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

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

and then you can add no-print class on each element which you do not want to print.