Wicked PDF игнорирует систему загрузочной сетки

в моем шаблоне сайта 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, все хорошо, за исключением бутстрап-сетки, я имею в виду нечестивый 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 без бутстрап-сетки. Можете ли вы мне помочь?

Ответ 1

Я столкнулся с той же проблемой. Существует несколько решений:

Обновите свой wkhtmltopdf двоичный файл до версии >= 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 вам нужно будет скопировать все .col-sm-*, .col-md-*, .col-lg-* правила из bootstrap.css в ваш pdf.css, НО без @media оберток, это важно.

Ответ 2

Для тех, кто использует KnpLabs/snappy, предоставление окна просмотра в качестве опции исправляет ситуацию:

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

Ответ 3

Вышеуказанные решения не работают с Bootstrap 4 на данный момент. Сетка Bootstrap 4 построена на использовании flexbox, который не поддерживается wicked_pdf из-за его зависимости от wkhtmltopdf.

Для того, чтобы при использовании Bootstrap 4 работала простая сетка, лучше всего создать отдельную таблицу стилей для страницы печати. В этой отдельной таблице стилей вы можете определить свою собственную сетку, используя команды width 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%. Вы можете добавить свои собственные дополнительные определения ширины, добавив что-то вроде этого в свою таблицу стилей 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/

Как использовать flexboxgrid с wicked_pdf?