我正在使用Symfony2 Bundle KnpSnappyBundle将html twig模板转换为pdf.
KnpSnappyBundle基于Snappy包装器,使用wkhtmltopdf.
我的模板使用twitter bootstrap 2.3.2 css,如下所示:
<div class="container">
<div class="row">
<div class="span12">
<h4>TITLE</h4>
</div>
</div>
<div class="row">
<div class="span6" id="customers">
<h5>TITLE</h5>
<p>TEXT</p>
<ul class="unstyled">
<li>LIST ITEM</li>
<li>LIST ITEM</li>
<li>LIST ITEM</li>
<li>LIST ITEM</li>
</ul>
</div>
<div class="span6" id="estimate">
<h5>TITLE</h5>
<ul class="unstyled">
<li>LIST ITEM</li>
<li>LIST ITEM</li>
<li>LIST ITEM</li>
<li>LIST ITEM</li>
</ul>
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
问题:客户和估计跨度不应该在同一条线上.我不知道发生了什么事.
当我使用bootstrap时,它会在我尝试打印页面时删除背景颜色.几乎我网站上的所有内容都是使用bootstrap类,所以我想在bootstrap之外避免很多手动CSS.我发现bootstrap @media print用来删除背景颜色.我也使用了一个bootstrap主题(主题联合),它也删除了背景颜色.
主题united.css
@media print
*, *:before, *:after {
background: rgba(0, 0, 0, 0) !important;
color: rgb(0, 0, 0) !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important;
Run Code Online (Sandbox Code Playgroud)
bootstrap.min.css
@media print
*, :after, :before {
color: rgb(0, 0, 0)!important;
text-shadow: none!important;
background: 0 0!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
Run Code Online (Sandbox Code Playgroud)
有没有办法确保在打印时不删除背景颜色而不编辑这2个CSS文件?
例如:当我使用.alert-danger时,我希望在屏幕上显示警告危险,因此将打印为红色框.
见JSFiddle:http: //jsfiddle.net/7mtk7wrh/
是否可以完全禁用任何预配置的@media printCSS样式bootstrap而无需重新编译它?
默认情况下应用的打印样式可以在这里看到:https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L6837
我希望我的网页能够按原样打印,并应用所有css标签.特别是颜色,如:
b {
color: #ff0000;
}
Run Code Online (Sandbox Code Playgroud)
为了从bootstrap禁用打印样式,我必须使用我的自定义样式再次显式覆盖每个属性,例如:
b {
color: #ff0000 !important;
}
Run Code Online (Sandbox Code Playgroud)
但是没有全局方法来禁用这些默认打印样式吗?