CODEWITHSUNDEEP
javascripthtmlcssdomcss-paged-media
AlfaTeK
AlfaTeK

Reputation: 7765

Get Print Page width/height using Javascript on Chrome

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)

Upvotes: 3

Views: 6583

Answers (2)

kshetline
kshetline

Reputation: 13682

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.

Upvotes: 2

orocsy
orocsy

Reputation: 35

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

Upvotes: 0

Related Questions