使用wkhtmltopdf：span问题将Twitter自带页面转换为PDF [英] Converting Twitter bootstrap page into PDF with wkhtmltopdf : span issue

问题描述

我使用 Symfony2 捆绑 KnpSnappyBundle 将html twig模板转换为pdf。

KnpSnappyBundle 是基础在 Snappy 包装器上使用 wkhtmltopdf 。

我的范本使用 twitter bootstrap 2.3。 2 css like this：

 < div class =container> 
< div class =row> 
< div class =span12> 
< h4> TITLE< / h4> 
< / div> 
< / div> 
< div class =row> 
< div class =span6id =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 =span6id =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> 
  

问题：客户和估计跨度不在同一条线上。
我不知道发生了什么。

解决方案

这里是Bootstrap3的解决方案：Use .col-xs -n always。

原因是wkhtmltopdf不支持css在@media块。在bootstrap3中，只有col-xs-n规则在@media块之外。

我检查了bootstrap2.3.2 css，似乎spanN规则总是在@media块内。

所以一个丑陋的解决方案将被复制到所有spanN规则到顶层到另一个css文件，并将其包含到html。

I am using Symfony2 Bundle KnpSnappyBundle to convert an html twig template to a pdf.

KnpSnappyBundle is base on Snappy wrapper, that use wkhtmltopdf.

My template use twitter bootstrap 2.3.2 css like this :

<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>

Problem : the customers and estimate spans are not on the same line as they should be. I don't know what is going on.

解决方案

Here is solution for Bootstrap3: Use .col-xs-n always.

The reason is wkhtmltopdf didnt support css in @media block. In bootstrap3, only col-xs-n rule outside @media block.

I've checked the bootstrap2.3.2 css, seems spanN rules always be inside @media block.

So an ugly solution would be copied out all spanN rules into top level to another css file and included it into html.

这篇关于使用wkhtmltopdf：span问题将Twitter自带页面转换为PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！