与屏幕相同的打印CSS

看来应该真的有一个简单的解决方案，但到目前为止，我一直没有找到一个。与屏幕相同的打印CSS

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

对此提出建议？

来源

2013-03-28 ecirish

您是否尝试过使用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的属性，但我收集的不是你要找的。

来源

2013-03-28 05:35:00 Jules

我了解媒体查询，但重点是我正在尝试使用_same_样式，并在打印时隐藏某些内容。将我所有的CSS复制到打印规则中似乎很麻烦。 – ecirish 2013-03-28 15:46:36

什么阻止你？在媒体查询之外放置除所涉及的class/id之外的所有样式，并且只需将媒体查询应用于此规则即可。我会更新我的答案以更好地说明我的观点。 – Jules 2013-03-28 20:35:56

IDK的约zurb的打印样式表，没有一个例子，它回答是相当困难的，但你可以使用weasyprint，开放源码库HTML/CSS转换为PDF https://github.com/Kozea/WeasyPrint

来源

2013-03-28 07:08:44 albert

这看起来很有趣，但这似乎很好地处理分页，我正在寻找一个简单的一页文档。 – ecirish 2013-03-28 15:48:42

男人我的坏，我完全误解了。做什么@ phil说。只需在打印样式表中将display：none放在窗体上即可。 – albert 2013-03-28 17:41:24

我在这些类型都做情况是使用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: *规则默认情况下会在所有浏览器中关闭打印，所以某些样式无论如何都会受到攻击。

来源

2013-03-28 16:21:43 Phil

与屏幕相同的打印CSS

回答

相关问题