How to display full viewport?

I’m trying to switch to use electron-pdf lib from phantomJS. I can generate the PDF from my HTML page, however, I don’t know how to modify the viewport to make the UI in PDF is generated correctly.

Please see the screenshot, even I set ‘landscape’, the UI still be rendered incorrectly. I want to make the viewport of page to be larger, which options will I use to do it?

[codecounselor]

First of all, try version 1.2.1 which uses Electron 1.4.x. I recently noticed really bad stuff like what you’re seeing after upgrading to version 1.3 of electron-pdf which is using Electron 1.6.x.

If you want the browser window to be larger, than you will have to set custom sizes, for example --pageSize '{"width":304800,"height":228600}' (that is 12 x 9 inches). I’d recommend you take a look at the windowTailor.js file https://github.com/fraserxu/electron-pdf/blob/master/lib/windowTailor.js

You need to be fairly intentional about either designing your document to be responsive or increasing your output size. If you want stuff to export well onto Letter size PDFs then you’ll need to design your page for an appropriately sized window (816 x 1056)

The code emits lots of events that you can use to see what it is doing. It is also helpful to set --browserConfig '{"show":true,"x":0,"y":0}' because what shows up in the window may not be what you get in your PDF.

Running directly from the CLI will be a bit more challenging to debug, but you could hack some of the code to leave the Electron process running if you want to pike around in the Chromium browser manually.

[Tin-Nguyen]

Here is my solution: We use the command to generate the PDF with landscape electron-pdf <input> <output> -l --marginsType '0'

Also, we update the layout of webpage to have full viewport.