CODEWITHSUNDEEP
javascriptcssangular
ChiaChih wu
ChiaChih wu

Reputation: 173

Using window.print() in angular 2 print only one page

I put the html for print in a div with class forPrint which is in a material dialog page and call the window.print() when the print button is clicked in the angular component.
However, it shows/prints only the page in the current screen and the rest is cut off when the button is clicked.
How to print the whole content in the div with class forPrint?
I think the reason is material dialog because when I print something in a normal page it works fine.

CSS:

@media print {
    /deep/ body * { visibility: hidden; }
    /deep/ .forPrint * { visibility: visible; display:block;}
    /deep/ .forPrint { display:block;position: absolute; top: 40px; left: 30px; } 

}

Upvotes: 2

Views: 5482

Answers (2)

Владимир Белых
Владимир Белых

Reputation: 11

I had such a problem when used material sidenav. Try create forPrint div beyond sidenav container.

Upvotes: 1

divya reddy
divya reddy

Reputation: 139

To print whole content of class-forPrint or page use below CSS

@media print {
      body, html, .forPrint{
          width: 100%;
          height:100%;
      }
}

Upvotes: 1

Related Questions