How to save my page so it looks as is in the browser?

Question

A client wants to save and print out a particular page I've made for them, however when the file is looked at, it loses all of the CSS formatting.

What do I need to look into in order to make it so that if a page is printed, it looks fairly close to what is on screen?

Answer 1

您应该为屏幕和打印提供相同的CSS，如下所示：

<link rel="stylesheet" type="text/css" href="path/to/your.css" media="screen,print" />

Answer 2

Saving as a PDF may be your best option. When printing from a HTML page, many pages have a seperate Print CSS file in order to remove backgrounds and images. Also depending on your browser, backgrounds and headers can be turned on and off before print.

Answer 3

You can't (see below) and you shouldn't, screen and print are fundamentally different formats with different requirements - the on screen version and the printed version should look different.

Even if you set the screen and print stylesheets to the same thing most browsers will still print differently to what they display because backgrounds are not printed and a printed page is approximately 700 pixels wide.

My advice would be to go back to the client and ask why they want a print out of the page as it is on screen. If it is just so they can annotate the design and request changes then recommend they either use an extension like Screengrab and then print the image or use a service like Notable .