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
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
The command to use headless Chrome to print webpage as PDF is chrome --headless --disable-gpu --print-to-pdf https://www.chromestatus.com/. The wkhtmltopdf has a feature --window-status ready_to_print to do so.
I ask this question because when I print this webpage contains MathJax.js, it has an error as follows:
The page source of that webpage has the following lines related to mathjax
<script src="../scripts.js"></script>
<script src="../../MathJax/MathJax.js?config=TeX-AMS_SVG"></script>
I would like to ask if there is an option so that Headless Chrome will wait until the page is fully loaded before printing?
We can use two options to achieve this goal: --run-all-compositor-stages-before-draw and --virtual-time-budget=10000.
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 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
In Chrome Canary (Version 30.0.1570.0 canary) I've set up sass source maps as follows:
DevTools > Settings > General > Enable CSS source maps + Auto-reload generated CSS CHECKED!
DevTools > Settings > Added folder public
My folder structure looks as follows:
public
sass
_buttons.scss
style.scss
css
style.css
index.html (with link href=css/style.css)
In DevTools I can do inspect element and see that a style-rule comes from _buttons.scss. I can click the _buttons.scss and get the DevTools to display the scss source. I can modify the source in devtools and hit cmd+s and it's saved to disk and when switching to sublime, the file has been updated. BUT in Chrome the css is not automatically reloaded. I have to refresh the page manually to reload the css.
Sass version:
$ sass -v
$ Sass 3.3.0.alpha.149 (Bleeding Edge)
I watch with:
$ sass --scss --sourcemap --watch public/sass:public/css
Any body else having problems with the Auto-reload generated CSS in Chrome (Canary) ?
I've also tried Chrome "normal" (20.0...) and same problem there, no auto-reload.
Have you tried using Workspaces? That's what I use and it's working fine for me, and always has. A bunch of things have moved out of experiments recently, so maybe that's why it's not working?