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

Posted 2023-02-24

【中文标题】使用 wkhtmltopdf 将 Twitter 引导页面转换为 PDF：跨度问题

【英文标题】：Converting Twitter bootstrap page into PDF with wkhtmltopdf : span issue

【发布时间】：2013-11-11 10:06:36

【问题描述】：

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

问题：客户和估计跨度不在应有的同一线上。 不知道怎么回事。

【参考方案1】：

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

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

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

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

【讨论】：

我发现了这个问题，因为我面临一个问题，即我的引导页面位于 3 列 (3-6-3) 中，当我通过 wkhtml2pdf 运行它时，它会将其全部呈现为 12 列。你能详细说明这个复制规则的场景吗？我正在使用 2.3.2

对我不起作用，所以我进一步搜索。 flex css 属性被忽略。所以我写了一个额外的.col-md-3 类，增加了浮点数和宽度，而不是它的工作。 Found issue here

将 viewport-size: '1024x768' 添加到 wkhtml2pdf 选项中，您可以使用 col-md-* 类。

它适用于 bootstrap 4，您只需要使用 .col-n 而不是 .col-xs-n

由于 Bootstrap 4.1 这不再有效，请参阅此处的说明：github.com/twbs/bootstrap/issues/27642#issuecomment-450479741

【参考方案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')">

【参考方案3】：

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

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

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

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

【讨论】：

我正在尝试在服务器端生成 pdf。如果我试图按照你说的做，我不会使用 Internet Explorer ;)