46

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
  • 811
  • 2
  • 8
  • 14
  • 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

6 Answers6

28

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
  • 63,018
  • 25
  • 139
  • 189
nuccio
  • 316
  • 6
  • 17
  • you're messing `--print-to-pdf` and `--print-topdf` – Limon Monte May 23 '18 at 08:55
  • 16
    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
15

"/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
  • 693
  • 9
  • 28
Ayaz Ur Rashid
  • 221
  • 3
  • 9
  • 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
7

If you need to print a page to PDF using Chrome (or Edge), without header and footer, there is an additional command line option: --no-pdf-header-footer. Another option --print-to-pdf-no-header can still be used, though it is now deprecated.

For a comprehensive list of all command line options, there is: https://peter.sh/experiments/chromium-command-line-switches/

predrags
  • 372
  • 4
  • 11
  • Does this remove the head only or with the footer as well? – TheRealChx101 Mar 19 '23 at 16:11
  • 1
    According to my knowledge, this option removes both header and footer. – predrags Mar 31 '23 at 10:21
  • 2
    --print-to-pdf-no-header is deprecated. Use **`--no-pdf-header-footer`** instead. Example command: `google-chrome --headless --print-to-pdf=file1.pdf --no-pdf-header-footer https://example.com ` – Zamicol May 01 '23 at 18:12
4

The CLI switches are indeed documented. First, for the original/classic chrome headless, they're at https://developer.chrome.com/blog/headless-chrome/#command-line-features.
For the "new" engine (since 2021, accessed with --headless=new), its switches are at https://developer.chrome.com/articles/new-headless/#headless-specific-command-line-flags.

Paul Verest
  • 60,022
  • 51
  • 208
  • 332
charlie arehart
  • 6,590
  • 3
  • 27
  • 25
-1

The functionality behind the --no-pdf-header-footer flag was previously available via the --print-to-pdf-no-header flag. Depending on which Chrome version you’re using, you might need to fall back to the old flag name.

For updated versions of chrome after new headless chrome update (dated Feb 2023).

Aman Ahlawat
  • 1
-4

Yes this media query needs to be added if you want to download the webpage as pdf. Reference Media Print CSS https://developer.mozilla.org/en-US/docs/Web/CSS/@media

Page CSS https://developer.mozilla.org/en-US/docs/Web/CSS/@page

Ayaz Ur Rashid
  • 221
  • 3
  • 9