Question

似乎应该有一个简单的解决方案，但到目前为止我找不到一个。

我正在使用Zurb Foundation，我基本上创建一个实时表单，从表单（上方）获取输入，并使用angular.js填充内容（下方）。然后，用户将页面打印为PDF。我想保留下面内容的布局，我想在打印时隐藏上面的表格。 Zurb有一个很好的“隐藏打印”css规则，看起来它应该适用于上面的表格，但是当我切换打印样式表时，它基本上剥离了所有的CSS并回到丑陋。

建议？

Answer 1

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

.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的某些属性。您可以随意在查询本身内部或外部放入任何.baz的属性。同样，您可以在媒体查询中添加所有的.baz属性，但我认为这不是您要查找的内容。

Answer 2

我在这些类型的情况下所做的是为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: *规则在打印时都会在所有浏览器中关闭，因此无论如何都会破坏某些样式。

Answer 3

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

与屏幕相同的打印CSS

3 个答案: