how to full print website content as seen on screen
Firefox is really bad at printing. https://i.imgur.com/T7s53ua.png
How can I print a page to pdf and preserve all formatting, layout, fonts, images, and background images?
Chosen solution
Just learned you can also screenshot from the Page Actions menu in the Address Bar
Read this answer in context 👍 0All Replies (8)
a WORKAROUND seems to be [Print Edit WE](https://addons.mozilla.org/en-US/firefox/addon/print-edit-we/)
Sounds like formatting issues conflict when FF prints WYSIWG. I don't recall FF having a print option to pdf option but opening it. So that might be a 3rd party software that install that option. I know when I installed Acrobat Pro that FF can print to PDF with that software.
@WestEnd yeah FF linux can print to PDF natively (Ctrl+P -> Print to File)
Different in Chromium for you? Seems about the same in Chrome on Windows.
That page uses a print style sheet to modify the layout (for example, inserting URLs after links). It's part of bootstrap. If you display the developer tools, switch to style editor, and delete lines 155 through 216 of the bootstrap style sheet (your 'pretty print' may vary, it's the block starting with @media print), then the print display is a bit more colorful, but it looks like a narrow/mobile version of the screen display because of the responsive theme, so still one column.
Then if you use the Print Preview toolbar to switch from portrait to landscape, the output finally looks a lot like the page. Except that page breaks may occur in dumb places. I don't know if Print Edit WE can help with page breaks.
Modified
Apparently firefox has a built-in screen capture that can capture the whole page
Shift+F2 -> screenshot (--fullpage) (--clipboard | nameOfFile)
(thanks to u/klesus https://www.reddit.com/r/firefox/comments/870xn0/its_2018_and_printing_a_webpage_is_still_garbage/dw9zrdi/)
codywohlers said
Apparently firefox has a built-in screen capture that can capture the whole page
Yes, if an image will do, that's a great tool. If you expect to use it frequently, you can add a little camera icon to the dev tools toolbar instead of using the command line.
Chosen Solution
Just learned you can also screenshot from the Page Actions menu in the Address Bar
Modified
Note that you can right-click an item in the "Page actions" drop-down list to add its button to the location/address bar for easy access.