Wicked 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网站时,除了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

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

1. 将wkhtmltopdf二进制文件升级到版本> = 0.12,然后添加:viewport_size要渲染的选项,如下所示:

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

2. 或者你可以只使用col-xs-*课程
3. 或者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,你将不得不复制粘贴所有.col-sm-*,.col-md-*,.col-lg-*从bootstrap.css规则到您的pdf.css,但没有@media包装,这一点很重要.

Answer 2

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

为了在使用 Bootstrap 4 时获得一个简单的网格，最好使用 widthw-*和 displayd-*命令定义您自己的网格，以否决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：

如何在 wicked_pdf 中使用 flexboxgrid？

Answer 3

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

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