Same print CSS as screen

问题

It seems like there should really be an easy solution to this, but so far I've been unsuccessful in finding one.

I'm using Zurb Foundation and I'm basically creating a live form that takes inputs from a form (above), and fills in a content (below) using angular.js. Users will then print the page to a PDF. I'd like to maintain the layout I have for the content below, and I'd like to hide the form above when printing. Zurb has a fine "hide-for-print" css rule that seems like it should work just fine when applied to the form above, but when I toggle print stylesheets, it basically strips all CSS and goes back to ugly.

Suggestions?

回答1:

What I have done in these type situations is use a separate file for the print.css.

<link rel="stylesheet" type="text/css" href="global.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

If the browser is printing, the global.css file will be loaded first and than the print.css file will overwrite anything aftewards.

Keep in mind though, that all background: * rules will be turned off in all browsers by default when printing, so some styles are going to be compromised regardless.

回答2:

Have you tried using CSS media queries for print media?

.foo {
    height:150px;
    width:150px;
    background-color:#F00  // see what I did there?
}

.bar {
    height:10px;
    width:50%;
    border-radius:5px;
    background-color:#000
}

.baz {
    width:100px;
    height:150px;
    background-color:#FFF;
}

@media screen {
    .baz {
        display:block;
    }
}

@media print {
    .baz {
        display:none;
    }
}

Now, only some of .baz's properties are targeted by the media queries. You can feel free to put in any of .baz's properties inside or outside of the queries themselves. Likewise, you can put all of .baz's properties in the media query, but I gather that's not what you're looking for.

回答3:

idk about zurb's print style sheets, and without an example, it's pretty hard to answer, but you can use weasyprint, open source library to convert html/css to pdf https://github.com/Kozea/WeasyPrint

来源：https://stackoverflow.com/questions/15674886/same-print-css-as-screen

标签

css

printing

zurb-foundation