I'd like to mimic the user zooming out to 80% when viewing my webpage. Something along the lines of
`google-chrome --headless --disable-gpu --screenshot --zoom=0.8 --window-size=1920,1080 http://www.example.com/`
But the "zoom" property doesn't exist, and I can't find anything in this list that looks comparable:
https://peter.sh/experiments/chromium-command-line-switches/
This must be a fairly common thing for people to want to do, so I feel I must be missing something simple...
Click the three vertical dots in the top-right corner of Chrome and then select “Settings.” Click “Advanced” and then select the “Privacy and Security” option. Scroll down and click “Site Settings.” Now, locate the “Zoom Levels” option. In this menu, you can view the custom zoom levels you've set for any given website.
Use Chrome's default zoom to 500%. Now use a "pinch-to-zoom" gesture on the trackpad to zoom in an additional 500%.
To visit a website in Chrome Headless, all you have to do is add the URL after the headless flag in the command line. Again, you'll see the Canary icon jump up and disappear in the Doc. But that's all you'll see.
Adding back this answer that was deleted but is what I was looking for.
--force-device-scale-factor=1.5
This will set a scale factor on the headless instance when you get the screenshot. Suppose you want a 500px by 500px image of a 1000px by 1000px web page. Then use:
google-chrome --headless --force-device-scale-factor=0.5 --window-size=1000,1000 --screenshot=out.png https://mywebsite.com
You don't need to use a chrome headless feature for that - chrome will render your css as long as you have the zooming in there. This is the css I used:
@media print{
@page { margin: 2%; size: A4 }
body { margin: 1.6cm; zoom: .7;}
footer {
position: fixed;
bottom: 1;
}
header {
position: fixed;
top: 1;
}
}
NOTE the zoom: .7
in the body ... to issue the following chrome headless call :
chrome --headless --disable-gpu --print-to-pdf \
'https://qto.fi:442/qto/view/installations_doc?&bid=0&as=print-doc'
Bonus: If you want custom header and footer with some logos etc. just add the header and footer tags:
<header><p>header</p></header>
<footer><p>footer</p></footer>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With