5

I am working on creating a printable document from an HTML page but the output is too large. I don't want to have to completely restyle the page to work for printing as well (ie. print media queries for everything again), so I was wondering if there is a way I can change the window.print (or window print dialog) settings.

I have figured out that setting the scale equal to 80% generates a good PDF; however, I obviously don't want people to have to remember this. Is there a way to do this in Chrome?

I have tried adjusting the browser page zoom but this leads to the same behaviour (squished content) that only covers a portion of the page. The technique was based on this question: Force page zoom at 100% with JS.

Also, I have tried adjusting the body scale to transform: scale(0.8);, but also to no avail. This resulted in a large amount of whitespace around the elements in the PDF that I couldn't remove.

Kendall
  • 1,992
  • 7
  • 28
  • 46
  • 3
    In my experience the only way to do this is with a media query and decent styling-and even then it's kind of a crap shoot. – Dave Newton Sep 13 '17 at 22:19
  • Yeah, I've already added several print queries only for hiding elements or adding page breaks, but I really don't want to do this for the entire thing. – Kendall Sep 13 '17 at 22:20
  • 1
    Even adding page breaks manually can be hit or miss (especially if you need to target, say, US letter and A4). It's largely trial and error, although maybe there are now libraries that can help with this. I ended up generating actual PDFs when I needed reliably-printable content... Which is another can of worms. – Dave Newton Sep 13 '17 at 22:23
  • Thankfully I know the page sizes and layout, so page breaks are wording for me. What Pdf generator /builder do you use? I've had no luck finding one that works for what we need to do. – Kendall Sep 13 '17 at 22:26
  • I've used several, generally Ruby-based. I forget which one I used last. In fairness, I used to write printers, so it was fairly easy for me. – Dave Newton Sep 13 '17 at 23:05

1 Answers1

5

The window.print() method calls the browser's built-in print support plugin to print the current DOM page. You can check the documentation: it doesn't support any argument or settings. To setup the print, you can only utilize the browser's GUI( ex. enable or disable background graphics etc.) see the screenshot below with browser GUI. enter image description here

As you can see in the image(Screenshot from Chrome), you can save to pdf or directly send to the printer as well. There are some other settings that are available to be changed accordingly. For more info about the window methods, you can go through Official Mozilla Docs for Window Object in Javascript

Peter Bergman
  • 472
  • 4
  • 16
Kiran Maniya
  • 8,453
  • 9
  • 58
  • 81