2

I want to print an HTML page and get a bit more control on the print layout I get so I started by setting @page to a specific size (A4 portrait in my case) and now I need to check if some dynamic content I have can fit into that page or do I have to split it manually in a few places.

Main problem I have is how to get the Print Page height/width dimensions.

I tried setting a div with width and height 100% and getting the height of that but it gives me a wrong result. For easy testing you can use this: https://playground.jsreport.net/w/anon/KpNomfIu (it's a library to print to PDF that basically just uses chrome to print and shows the pdf).

I'm getting always 600px as height no matter if I use A3 or A4 or A1 so clearly this is wrong.

This only needs to work on Chrome. (I understand this is odd but I need a layout that is not possible to achieve using CSS3 Paged Media and everything related)

AlfaTeK
  • 7,487
  • 14
  • 49
  • 90

2 Answers2

2

The A4 page size is defined as 210mm x 297mm, which is 8.268" x 11.69". Since CSS pixels are 96px/inch (as long as we're talking about a high-resolution device like a printer -- CSS pixels equal device pixels for low-res applications), I think you should be able to rely on the page size being 793.7px x 1123px, less any margins you want to provide, without having to extract these values through code.

kshetline
  • 12,547
  • 4
  • 37
  • 73
  • yes, my backup is to just hardcode values but JS getting the available is a better solution since it can work in A4 or A3 or whatever I use in the future (page size is actually a setting passed to this page) – AlfaTeK Aug 16 '18 at 20:48
0

Could do a page break on the DOM elements you want to split across , like @media print{img{page-break-after: always}}, make sure the element has to be block element not inline nor inline-block

orocsy
  • 35
  • 1
  • 6