Html 使用 wkhtmltopdf 将 Twitter 引导页面转换为 PDF：跨度问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19705880/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Converting Twitter bootstrap page into PDF with wkhtmltopdf : span issue
提问by user1254498
I am using Symfony2Bundle KnpSnappyBundleto convert an html twig template to a pdf.
我正在使用Symfony2Bundle KnpSnappyBundle将 html twig模板转换为 pdf。
KnpSnappyBundleis base on Snappywrapper, that use wkhtmltopdf.
KnpSnappyBundle基于Snappy包装器，使用wkhtmltopdf。
My template use twitter bootstrap2.3.2 css like this :
我的模板使用twitter bootstrap2.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>
Problem : the customers and estimate spans are not on the same line as they should be. I don't know what is going on.
问题：客户和估计跨度不在同一条线上。我不知道发生了什么。
回答by raykin
Here is solution for Bootstrap3: Use .col-xs-n always.
这是 Bootstrap3 的解决方案：始终使用 .col-xs-n。
The reason is wkhtmltopdf didnt support css in @media block. In bootstrap3, only col-xs-n rule outside @media block.
原因是 wkhtmltopdf 不支持 @media 块中的 css。在 bootstrap3 中，只有 @media 块之外的 col-xs-n 规则。
I've checked the bootstrap2.3.2 css, seems spanN rules always be inside @media block.
我检查了 bootstrap2.3.2 css，似乎 spanN 规则总是在 @media 块内。
So an ugly solution would be copied out all spanN rules into top level to another css file and included it into html.
因此，一个丑陋的解决方案会将所有 spanN 规则复制到顶层到另一个 css 文件并将其包含到 html 中。
回答by Abdelsalam Shahlol
I know that this question is old but this problem stilloccurs. In a recent Laravel 5.8and Twitter Bootstrap 4.0.0project. I managed to use .col-md .coland getting perfect results by doing the following:
我知道这个问题很老，但这个问题仍然存在。在最近的Laravel 5.8和Twitter Bootstrap 4.0.0项目中。.col-md .col通过执行以下操作，我设法使用并获得了完美的结果：
In adding --viewport-size 1024x768argument on config/snappy.php
在config/snappy.php--viewport-size 1024x768上添加参数
'pdf' => array(
'enabled' => true,
'binary' => "C:\wkhtmltopdf\bin\wkhtmltopdf --viewport-size 1024x768",
'timeout' => false,
'options' => array(),
'env' => array(),
)
Then on your view use .col-mdor .colwithout any problems.
然后在您看来使用.col-md或.col没有任何问题。
Note, include Bootstrap 4to your HTML using public path.
请注意，Bootstrap 4使用公共路径包含到您的 HTML 中。
//Laravel
<link rel="stylesheet" href="{{public_path('css/bootstrap4/bootstrap.min.css')}}">
回答by Terri Swiatek
If you are just trying to create a PDF of hosted web page you can do so for free using Internet Explorer.
如果您只是想创建托管网页的 PDF，您可以使用 Internet Explorer 免费完成。
I've had to do this for some clients that require viewing their web page and emails layouts in a PDF format for approvals.
对于一些需要以 PDF 格式查看其网页和电子邮件布局以进行审批的客户，我不得不这样做。
- Open the web page in Internet Explorer.
- Hit F12on your keyboard and it will open the inspection tools.
- Choose the icon for 'Emulation'it's a little computer/phone icon. This allows you to select which version of IE you want to emulate your page in. I choose IE8to get responsive pages and emails to render like they would on a full desktop view.
- Then in the top right hand corner of your browser should be an icon (earth with a little PDF doc next to it), click that dropdown menu and select 'Convert Webpage to PDF'
- 在 Internet Explorer 中打开网页。
- 在键盘上按F12，它将打开检查工具。
- 选择“仿真”图标，它是一个小计算机/电话图标。这允许您选择要在哪个版本的 IE 中模拟您的页面。我选择 IE8来获得响应式页面和电子邮件，以便像在完整的桌面视图上一样呈现。
- 然后在浏览器的右上角应该是一个图标（地球旁边有一个小 PDF 文档），单击该下拉菜单并选择“将网页转换为 PDF”
This should automatically create a PDF of your web page as accurately as possible even with responsive CSS.
即使使用响应式 CSS，这也应该尽可能准确地自动创建网页的 PDF。
