显示包含打印样式的网页

Question

Is there a way to display a webpage with CSS for printing instead of standard CSS?

I want to see how the webpage will look like before printing. I don't want print preview in print dialog, but the webpage with CSS for printing. I use @media print to specify printing styles.

Answer 1

I am not sure if you just want to see the preview while developing or to show the Vistor an Preview.

If you want to offer your visitors an option to preview the Page before Print, i would suggest to use a JQuery Plugin like this:

JQuery Print Preview

Answer 2

如果您正在使用镀铬按F12 - >来源 - >仿真 - >媒体并检查“CSS媒体”

Answer 3

I understand you want the browser to show the page with the CSS for the print media.

Most browsers can do that in the "print preview" (Opera does it well without opening a new window!).

Some browsers can let the user switch between CSS when they are named; there is a nice article on a list apart . Example:

<link rel="alternate stylesheet" type="text/css" href="paul.css" title="wacky" />

With this you could do something in the like:

<!-- specify the CSS for display devices -->
<link rel="stylesheet" type="text/css" href="main.css" title="default" media="display">
<!-- set an *alternate* stylesheet, the user will be able to switch between it and the previous, for display only -->
<link rel="alternate stylesheet" type="text/css" href="print.css" title="print preview" media="display">
<!-- this is the stylesheet for printing, note this is the same file as before -->
<link rel="alternate stylesheet" type="text/css" href="print.css" media="print">

And follow guidance of the previously cited article on A list appart to let the user switch between CSS.

I don't want to include all their code, but the main part is:

function setActiveStyleSheet(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName("link")<i>); i++) {
     if(a.getAttribute("rel").indexOf("style") != -1
        && a.getAttribute("title")) {
       a.disabled = true;
       if(a.getAttribute("title") == title) a.disabled = false;
     }
   }
}