30

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

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

4

3 回答 3

101

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

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

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

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

于 2014-01-16T03:38:54.270 回答
10

我知道这个问题很老，但这个问题仍然存在。在最近的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')}}">
于 2019-07-24T22:07:32.433 回答
-42

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

对于一些需要以 PDF 格式查看其网页和电子邮件布局以获得批准的客户，我不得不这样做。

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

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

于 2014-01-10T18:39:34.447 回答