35

I need help one more time. I am trying to print a page to pdf using headless feature of the chrome. However, header and footer is present in the pdf. I found that this option as been implemented in Devtools.

https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-printToPDF

However, i can't find how can i use these options in CLI. Also is it possible to invoke the Devtools from selenium?

Additionally how can i invoke Page.PrintToPDF in Dev tools. I tried to run the command in Console. It is showing Page is undefined.

user2580925
  • 613
  • 2
  • 7
  • 13
  • First off do are you using these two flags from the command line? --headless \ # Runs Chrome in headless mode. --disable-gpu \ # Temporarily needed for now. – nuccio Dec 05 '17 at 21:24
  • Today, I came across a similar problem and found that currently the only solution seems to be to make use of the chrome-debugging-protocol. For a different question I wrote an answer on how to do that from the CLI: https://stackoverflow.com/a/51431779/1149404 – JepZ Jul 19 '18 at 21:22

2 Answers2

24

Add this CSS to the page your creating into a PDF to remove Chrome Headless's implemented Header and Footer.

CSS:

@media print {
  @page { margin: 0; }
  body { margin: 1.6cm; }
}

You should format your command like below to create the PDF:

"C:\PATH\TO\CHROME\EXECUTABLE\FILE", "--headless","--disable-gpu","--print-to-pdf=" + directory path to where you want the file to go followed by the desired file name/fileName.pdf,"--no-margins", "the path to the file you want turned into a pdf"

Example 1:

C:\chrome-win/chrome --headless --disable-gpu --print-to-pdf=C:\user\fileName.pdf --no-margins C:\Projects\index.html

Example 2:

You can also test this functionality by navigating in your command line to the folder containing Chrome executable file, and running this command:

chrome --headless --disable-gpu --print-to-pdf https://www.chromestatus.com/
Lawrence Dol
  • 59,198
  • 25
  • 134
  • 183
nuccio
  • 536
  • 4
  • 14
  • you're messing `--print-to-pdf` and `--print-topdf` – Limon Monte May 23 '18 at 08:55
  • 13
    This doesn't correctly solve the issue on multi-page PDFs - it removes the bottom margin on all but the last page, and the top margin on all but the first. I suppose there's no way to do this without breaking multi-page margins unless you use the DevTools API... – codermonkeyfuel Jul 03 '18 at 04:27
  • codermonkeyfuel, this has worked for me to create multi-page PDFs without the original margin on any page with both the Chrome Headless Windows and Linux Library. Create a new issue or post more info below. I will help you resolve this issue. – nuccio Jul 03 '18 at 17:34
  • would you please clarify how to add the css file using CLI? I do not understand how to do this if the url I want to save is a web page not a local html file – spacegoing Jul 25 '18 at 01:14
  • In the past, I have used Phantomjs to modify existing pages before turning them into PDF's, but I have never used Chrome Headless to do the same. I believe that you can inject the CSS i have listed above with puppeteer: https://github.com/GoogleChrome/puppeteer – nuccio Jul 26 '18 at 17:22
10

"/path/to/google-chrome" : This is the path of Google Chrome.

'--headless' : Chrome browser in a headless environment without the full browser UI

'--run-all-compositor-stages-before-draw' : It Prevents the Pdf Creation Before all the data is rendered(After all data is rendered the pdf will be created).

'--virtual-time-budget = x: It Delays the Process of creation of Pdf, here x will be the miliseconds.

'--print-to-pdf' : This Flag creates the pdf of the given Url.

URL : The url of webpage.

PDF Page Formatting (Using CSS) Adding this(to css files):

 @media print {
            @page { margin: 0mm 0mm 0mm 0mm;
            size:8in 9.5in;
            }
            }

The Above CSS code has no effect on the Webpage Rendering,But effect on the formatting of page in PDF only.

Nathaniel M. Beaver
  • 527
  • 7
  • 25
Ayaz Ur Rashid
  • 101
  • 1
  • 5
  • @page CSS is not working .. – Kamlesh Mar 13 '21 at 11:19
  • I don't think you need the media query because @page is only for print. Also, according to https://developer.mozilla.org/en-US/docs/Web/CSS/@page You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored. – Ayaz Ur Rashid Apr 27 '21 at 09:21