5

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?

4

3 回答 3

1

您是否尝试过对媒体使用 CSS 媒体查询print？

.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;
    }
}

现在，只有一些.baz's 属性是媒体查询的目标。您可以随意.baz在查询本身内部或外部放入任何 's 属性。同样，您可以将所有的.baz属性放在媒体查询中，但我认为这不是您想要的。

于 2013-03-28T05:35:00.090 回答
1

我在这些类型的情况下所做的是为print.css.

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

如果浏览器正在打印，global.css将首先加载文件，然后print.css文件将覆盖任何内容。

但请记住，background: *默认情况下，打印时所有浏览器中的所有规则都将关闭，因此无论如何都会影响某些样式。

于 2013-03-28T16:21:43.340 回答
0

关于 zurb 的打印样式表的 idk，没有示例，很难回答，但是您可以使用 weasyprint，开源库将 html/css 转换为 pdf https://github.com/Kozea/WeasyPrint

于 2013-03-28T07:08:44.557 回答