0

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

enter image description here

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:

enter image description here

I want to print only pdf content instead of whole hmtl page. Is there any way to do that?

Thanks inadvance!!

Ravi
  • 1,614
  • 4
  • 14
  • 27
  • Possible duplicate of [How to print only a selected HTML element?](https://stackoverflow.com/questions/6500962/how-to-print-only-a-selected-html-element) – Albert Einstein Apr 04 '18 at 05:53

1 Answers1

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.

Anand Siddharth
  • 967
  • 1
  • 9
  • 30
  • Hi @Anand, Where should I use this . tag? . Is it inside the button tag or in header tag? And also, I have hundreds of elements in my page. It is not good to hide all the elements for one particular element. – Ravi Apr 04 '18 at 06:15
  • In that case if you do not want to hide all the elements you have, you can create one more route in your angular app, which opens in new tab when clicked and onViewInit && pdf Load of that page you can call window.print(); – Anand Siddharth Apr 04 '18 at 06:45