邪恶的 PDF 忽略引导网格系统

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 站点时，除了引导网格系统之外，一切都很好，我的意思是 wicked 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

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

为了在使用 Bootstrap 4 时获得一个简单的网格，最好使用宽度 w-* 和 display d-* 命令定义您自己的网格，以推翻 display: flex 设置。

例子：

<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>

注意：默认情况下仅支持 25、50、75 和 100% 的宽度。您可以通过将自己的额外宽度定义添加到引导程序的 $sizes 变量来增加灵活性，方法是将类似这样的内容添加到您的 scss 样式表中：

// _custom.scss

@import "bootstrap/functions";
@import "bootstrap/variables";
$sizes: map-merge((20: 20%, 33: 33.33%, 40: 40%, 60: 60%, 67: 66.67%, 80: 80%), $sizes);
@import "bootstrap";

// Your CSS

使用宽度和显示类：

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?

Answer 2

对于使用KnpLabs/snappy 的任何人，提供视口作为选项可以解决这种情况：

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

Answer 3

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

1. Upgrade 你的 wkhtmltopdf 二进制版本 >= 0.12，然后添加 :viewport_size 选项进行渲染，如下所示：

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

1. 或者你可以只使用col-xs-* classes
2. 或者创建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 包装器，这很重要。