I was trying to create a PDF file from a website that I was viewing today and it wasn’t displaying “correctly”. Of course, this wasn’t a Chrome bug or anything, the website just had a rather fun “print” stylesheet that was changing the way everything looked, which isn’t what I wanted in my PDF file, I wanted it to look like the “screen” view.
It turned out that in Chrome the answer was quite simple, when you knew how. I find this is often the way with Chrome, so many hidden gems.
In this case, open the Developer Tools, then click the 3 vertical dots icon in the top right and choose “More Tools” from the menu, followed by “Rendering”. This will add a new tab to the bottom section of the Developer Tools, aptly labelled “Rendering”.
If you scroll down the options here (of which there are many fun sounding ones I need to come back and play with!) and you’ll see one labelled “Emulate CSS media type” with a little dropdown – select “screen”.
Now when you print, this emulation remains in place and you get a print preview that looks more what I was expecting, with no hint of a “print” stylesheet at all. Simples.