Question

在我的模板x.pdf.erb网站中我链接了所有样式表和javascript标记：

           <%= wicked_pdf_stylesheet_link_tag "bootstrap.css" -%>
            <%= wicked_pdf_stylesheet_link_tag "style.css" -%>
            <%= wicked_pdf_stylesheet_link_tag "styleUmowa.css" -%>
            <%= wicked_pdf_stylesheet_link_tag "animate.css" -%>
            <%= wicked_pdf_javascript_include_tag "application" %>

当生成pdf网站时，一切都很好，除了bootstrap网格系统，我的意思是邪恶的pdf忽略了我的：

<div class="container">
   <div class="row">
       <div class="col-lg-4"></div>
       <div class="col-lg-4"></div>
       <div class="col-lg-4"></div>
   </div>
</div>

因此，它显示为没有自举网格的普通div。你能帮我解决这个问题吗？

Answer 1

我遇到了同样的问题。有几种解决方案：

Upgrade您的wkhtmltopdf二进制文件版本＆gt; = 0.12，然后添加:viewport_size选项进行渲染，如下所示：

respond_to do |format|
  format.html
  format.pdf do
    render pdf: "my_pdf",
           viewport_size: '1280x1024'
  end
end

或者您可以使用col-xs-*类
或使用以下内容创建pdf.css.scss（我使用bootstrap-sass）：

@import "bootstrap/variables";
@import "bootstrap/mixins";

@include make-grid(sm);
@include make-grid(md);
@include make-grid(lg);

请勿忘记将其与<%= wicked_pdf_stylesheet_link_tag "pdf.css" -%>

对于普通css，您必须将bootstrap.css中的所有.col-sm-*，.col-md-*，.col-lg-*规则复制粘贴到pdf.css中，但不包含@media包装，这很重要。

Answer 2

对于使用KnpLabs/snappy的任何人，将视口作为选项进行修复可以解决问题：

$snappy->setOption('viewport-size','1280x1024');

Answer 3

目前，以上解决方案不适用于Bootstrap 4。 Bootstrap 4的网格系统是基于flexbox构建的，由于它依赖于wkhtmltopdf，因此wicked_pdf不支持它。

为了在使用Bootstrap 4时获得简单的网格，最好通过使用宽度w-*并显示d-*命令来定义自己的网格，以否决{{1} }设置。

示例：

display: flex

注意：默认情况下仅支持25％，50％，75％和100％的宽度。您可以通过在bootstrap的<div class="container"> <div class="row d-table-row"> <div class="col w-25 d-table-cell"></div> <div class="col w-25 d-table-cell"></div> <div class="col w-25 d-table-cell"></div> <div class="col w-25 d-table-cell"></div> </div> </div>变量中添加自己的其他宽度定义，或者在scss样式表中添加类似的内容来提高灵活性：

$sizes

使用宽度和显示类别：

https://getbootstrap.com/docs/4.0/utilities/display/

https://getbootstrap.com/docs/4.0/utilities/sizing/

Bootstrap 4 flexbox网格和wkhtmltopdf：

How to use flexboxgrid with wicked_pdf?

Wicked PDF忽略了引导网格系统

3 个答案: