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

Question

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; } 

}

it may have something to do with position: absolute; and only supplying top/left ... add bottom:40px; right:30px; (I'm assuming you've done the above to add margins to the printed document) — Jaromanda X
– Jaromanda X, Commented Nov 10, 2017 at 3:36
I think the reason is the material dialog, because when I print something in a normal page it works fine — ChiaChih wu
– ChiaChih wu, Commented Nov 10, 2017 at 7:32

divya reddy · Accepted Answer · 2017-11-10 03:36:56Z

1

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

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

answered Nov 10, 2017 at 3:36

divya reddy

1391 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Владимир Белых · Accepted Answer · 2017-11-17 01:02:33Z

1

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

answered Nov 17, 2017 at 1:02

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

111 bronze badge

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related