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

我正在使用Bundle将html小枝模板转换为pdf

是基于包装器的，即使用

我的模板使用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>

标题
标题
正文


列表项
列表项
列表项
列表项

标题

列表项
列表项
列表项
列表项

问题：客户和估计跨度不在同一条线上。

---

我不知道发生了什么。

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

我已经为一些需要以PDF格式查看其网页和电子邮件布局以获得批准的客户这样做了

在Internet Explorer中打开网页

点击键盘上的F12，它将打开检查工具

选择“仿真”图标，这是一个小的计算机/电话图标。 这允许您选择要模拟的IE版本 您的页面已进入。我选择IE8以获取响应页面和电子邮件 像在完整的桌面视图上一样进行渲染

然后在浏览器的右上角应该有一个图标（地球旁边有一个小的PDF文档），单击该下拉菜单并选择“将网页转换为PDF”

---

这将自动创建一个尽可能准确的网页PDF，即使使用响应CSS。

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

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

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

---

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

我知道这个问题很老，但这个问题仍然存在。在最近的一个Laravel5.8和Twitter Bootstrap4.0.0项目中。我成功地使用了

.col md.col

，并通过以下操作获得了完美的结果：

在config/snappy.php

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

然后在您的视图中使用

.col md

或

.col

，没有任何问题

注意，使用公共路径将

引导程序4

包含到HTML中。

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

//Laravel

我正在尝试在服务器端生成pdf。如果我试着按照你说的做，我就不会使用internet explorer；）我发现这个问题是因为我面临一个问题，我的引导页面分为3列（3-6-3），当我通过wkhtml2pdf运行它时，它将所有页面呈现为12列。你能详细说明一下这个复制规则的场景吗？我使用的是2.3.2Did，不适合我，所以我进一步搜索了<代码>flexcss属性被忽略。因此，我编写了一个额外的

.col-md-3

类，添加了浮点和宽度，比实际效果更好。将视口大小：“1024x768”添加到wkhtml2pdf选项中，您可以使用col md-*类。它适用于引导程序4，您只需使用.col-n而不是.col xs nSince引导程序4.1。这不再有效，请参阅此处的说明：