与屏幕相同的打印CSS
问题描述:
看来应该真的有一个简单的解决方案,但到目前为止,我一直没有找到一个。与屏幕相同的打印CSS
我正在使用Zurb基金会,我基本上是创建一个实时表单,它从一个表单(上面)获取输入,并使用angular.js填充内容(如下)。用户然后将打印页面到PDF。我想保留下面内容的布局,并且我想在打印时隐藏上面的表单。 Zurb有一个很好的“隐藏式打印”css规则,看起来应用于上面的表单时应该工作得很好,但是当我切换打印样式表时,它基本上剥离了所有的CSS并回到丑陋。
对此提出建议?
答
您是否尝试过使用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
的性能有一些由媒体查询目标。您可以随意在查询本身之内或之外放入.baz
的任何属性。同样,你可以在媒体查询中输入全部的.baz
的属性,但我收集的不是你要找的。
答
IDK的约zurb的打印样式表,没有一个例子,它回答是相当困难的,但你可以使用weasyprint,开放源码库HTML/CSS转换为PDF https://github.com/Kozea/WeasyPrint
答
我在这些类型都做情况是使用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
文件将aftewards覆盖任何东西。
请记住,所有background: *
规则默认情况下会在所有浏览器中关闭打印,所以某些样式无论如何都会受到攻击。
我了解媒体查询,但重点是我正在尝试使用_same_样式,并在打印时隐藏某些内容。将我所有的CSS复制到打印规则中似乎很麻烦。 – ecirish 2013-03-28 15:46:36
什么阻止你?在媒体查询之外放置除所涉及的class/id之外的所有样式,并且只需将媒体查询应用于此规则即可。我会更新我的答案以更好地说明我的观点。 – Jules 2013-03-28 20:35:56