Question

我正在使用Symfony2捆绑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>

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

Answer 1

以下是Bootstrap3的解决方案：始终使用.col-xs-n。

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

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

因此，一个丑陋的解决方案会将所有spanN规则复制到顶级到另一个css文件并将其包含在html中。

Answer 2

我知道这个问题很旧，但是仍然出现此问题仍然。在最近的 Laravel 5.8 和 Twitter Bootstrap 4.0.0 项目中。我设法使用.col-md .col并通过执行以下操作获得了完美的结果：

在 config / snappy.php

上添加--viewport-size 1024x768自变量

     'pdf' => array(
        'enabled' => true,
        'binary' => "C:\wkhtmltopdf\bin\wkhtmltopdf --viewport-size 1024x768",
        'timeout' => false,
        'options' => array(),
        'env' => array(),
    )

然后您认为使用.col-md或.col不会出现任何问题。

请注意，使用公共路径将 Bootstrap 4 包含到HTML中。

//Laravel
<link rel="stylesheet" href="{{public_path('css/bootstrap4/bootstrap.min.css')}}">

Answer 3

如果您只是尝试创建托管网页的PDF，则可以使用Internet Explorer免费创建。

对于需要查看其网页和电子邮件格式的客户而言，我必须这样做才能获得批准。

在Internet Explorer中打开网页。
点击F12 ，它将打开检测工具。
选择'仿真'的图标这是一个小小的电脑/手机图标。这允许您选择要模拟的IE版本您的页面。我选择IE8 以获取响应式页面和电子邮件像在完整桌面视图上一样渲染。
然后在浏览器的右上角应该是一个图标（旁边有一个小PDF文档的地球），点击该下拉菜单并选择'将网页转换为PDF'

即使使用自适应CSS，也应尽可能准确地自动创建网页PDF。

使用wkhtmltopdf：span问题将Twitter引导页面转换为PDF

3 个答案: