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

Question

我正在使用 Symfony2 Bundle KnpSnappyBundle 将 html 树枝模板转换为 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 中，@media 块外只有 col-xs-n 规则。

我检查了 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 没有任何问题。

注意，使用 public path 将 Bootstrap 4 包含到您的 HTML 中。

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

Answer 3

如果您只是想创建托管网页的 PDF，您可以使用 Internet Explorer 免费进行。

我不得不为一些需要以 PDF 格式查看其网页和电子邮件布局以获得批准的客户执行此操作。

1. 在 Internet Explorer 中打开网页。
2. 按键盘上的 F12，它将打开检查工具。
3. 选择'Emulation'的图标，它是一个小电脑/电话图标。 这允许您选择要模拟的 IE 版本 你的页面。我选择 IE8 来获取响应页面和电子邮件 像在完整的桌面视图上一样呈现。
4. 然后在浏览器的右上角应该有一个图标（地球旁边有一个小的 PDF 文档），单击该下拉菜单并选择 '将网页转换为 PDF'

这应该会自动为您的网页创建尽可能准确的 PDF，即使使用响应式 CSS。