I got a multipage HTML document, which I want to export to PDF using headless Google Chrome / Chromium from the command line: chrome --headless --print-to-pdf [...]. The issue with this is, that Chrome adds auto-generated headers and footers to the page when "printing". Others have suggested using #page {margin: 0} in my CSS, but as some others also stated, that only works for a few pages for some magic reason, hence there's a footer on the last page of my example.
I am aware of an NPM package that supports export without headers, but that export takes around 30% more time than headless Chrome itself and would require installing and setting up NPM and the package on my company's servers.
If anyone knows any way to hide Google Chrome's default headers / footers on headless PDF-export by CSS or some setting, please let me know.
By the way, since I did not figure out another solution, I went with the NPM package instead. It's been working very well and reliably so far, it just took about 30% more time in my tests, so keep that in mind.
There is an option available in latest Google Chrome Canary builds for this. Use the --print-to-pdf-no-header option.
canary \
--headless \
--disable-gpu \
--run-all-compositor-stages-before-draw \
--print-to-pdf-no-header \
--print-to-pdf=example.pdf \
http://example.com
ref: source code
Maybe this thread could help you. basically you need to add CSS bellow
#media print {
#page { margin: 0; }
body { margin: 1.6cm; }
}
and the "--no-margins" parameter
Related
I am using the CLI for Google Chrome to save an HTML to PDF. I need tp save the PDF in landscape mode, cannot find the command. I am using this command:
google-chrome --headless --disable-gpu --run-all-compositor-stages-before-draw --print-to-pdf-no-header --Landscape=true --print-to-pdf="MyPdf.pdf" "MyHtml.html"
You can not use Landcape on command line for chrome or derivatives like Edge.
That is intentional as the developer team have certainly up to now, resisted expanding similar command line settings for such usage, their recommendation is you should be using API methods.
You can workaround that by using either #page html or by injected javascript or else the printer needs to define the page output.
2017
We don't intend to provide all the flexibility that DevTools provides through command line options: There are various technical reasons why command line options cannot provide the same flexibility.
It appears that Headless Chrome does parse #page as well to some extent, but behaves differently than the desktop version: If you specify #page {size}, headless seems to change the dimensions of the page box (essentially, the print area), and not the sheet, which always remains US Letter sized. However, it does rotate the sheet if you specify {size: landscape}.
The print options are exposed via the DevTools API only (and not via command line flags), see comments #51 and prior.
2021/2? best option is possibly an enabler like https://github.com/dataverity/chromehtml2pdf#readme
I am using the command line in Windows to print a PDF using Google Chrome with the headless options Print to PDF. I want to know how can I use the other options available as the margins and pages size or even orientation. I notice the options are available in https://chromedevtools.github.io/devtools-protocol/tot/Page#method-printToPDF
but base on this question, it seems doesnt work https://superuser.com/questions/1281309/how-can-i-print-a-webpage-in-landscape-mode-using-headless-chromium-on-the-comma
Has anyone use any of the options available and what is the correct sintaxis as the code below generates the pdf but ignores page size?
chrome.exe --headless --disable-gpu --print-to-pdf=C:\\Spotfire_Export\\'+filename+'.pdf --paperWidth=15 '+tempFolder+filename+'.html
I also had the same issue and found the same links mentioned before.
I'm generating pages with PHP and running google-chrome via exec.
Then I found this page and tried on my case and it worked well.
Here is the code which I added in my CSS.
#page {
size: A4 landscape;
margin: 0;
}
I hope that this helps someone.
I need to keep a browser running in the background for a specific issue but i have to hide it so the enduser should not see. I have tried electron, nwjs and carlo and ended up using puppeteer since none of the above was meeting my expectation. I need to run a specific chrome extension. I have completed everything but i can't find out how to hide the chronium. I have tried "--no-startup-window" argument for chromium and window doesn't show up but code get stuck at
await puppeteer.launch(options);
I have read through puppeteer api and look through chronium args but could not figure out. Is there a way to hide chronium but run it in the background?
Thank you for your help in advance.
You probably would like to run Chromium in headless mode. For this you may use command line switch or launch options. More information on Getting Started with Headless Chrome is available at this article.
Starting headless:
chrome --headless
Using puppeteer launch options:
{
"headless": true,
"args": ["--fast-start", "--disable-extensions", "--no-sandbox"],
"ignoreHTTPSErrors": true
}
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.
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/
"/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.
If you need to print a page to PDF using Chrome (or Edge), without header and footer, there is an additional command line option: --print-to-pdf-no-header.
For a comprehensive list of all command line options, there is:
https://peter.sh/experiments/chromium-command-line-switches/
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
I tried to enable support for sass source mapping in Chromium (v31.0.1606.0) but it seems that there is the "Support for SASS"-option missing in my case.
I followed those instructions:
http://fonicmonkey.net/2013/03/25/native-sass-scss-source-map-support-in-chrome-and-rails/
Screenshot of my "Experiments"-Window:
see http://i.stack.imgur.com/UhFNp.png
Hint: I also tried it with Google Chrome Canary and Chrome v30 and it didn´t worked either.
This one got me too, after reading a NetTuts article on Developing With Sass and Chrome DevTools. Seems like most articles on the subject are outdated.
Turns out Chrome v30 and later ship with souce maps and SASS support enabled by defualt. In v29 and earlier you have to check the "Support for SASS" box.
Furthermore, according to Google:
"Currently Sass is the only preprocessor that supports CSS source maps..."
So as long as you don't uncheck "Enable CSS Source Maps" in Dev Tools > Settings > General, you can hack away at your scss/sass directly from chrome.
I followed the Google Dev Tools docs and got it working on OSX.8 with Canary 32.0.1664.3. Here are the key points:
Make sure you're using sass 3.3.0alpha
gem install sass -v '>=3.3.0alpha' --pre
Add the --sourcemap flag when you run sass from shell
sass --watch --sourcemap sass/styles.scss:styles.css
Optionally enable "Auto-reload generated CSS" in Dev Tools > Settings > General for real-time goodness.
Here's a screenshot from my machine immediately after following the above steps and firing up a site with Sass.
Sources:
Working with CSS Preprocessors - Chrome DevTools – Google Developers
Developing With Sass and Chrome DevTools | Nettuts+