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.