Rails: WickedPDF: разрывы страниц

Question

В моем Ruby (1.9.2) Rails (3.0.x) я хотел бы отобразить веб-страницу в формате PDF, используя wicked_pdf, и я хотел бы контролировать расположение разрывов страниц. Мой код CSS для управления разрывами страниц выглядит следующим образом:

<style>
  @media print
  {
    h1 {page-break-before:always}
  }
</style>

Однако, когда я отображаю страницу с wicked_pdf , документ не разделяется на две страницы. Есть ли что-то еще, что я должен сделать, чтобы получить разрывы страниц с wicked_pdf?

Answer 1

По какой-то причине "@media print" не совсем это сделал. Я просто пошел с

.page-break { display:block; clear:both; page-break-after:always; }

для правила CSS, а затем я вставил следующее на своей странице для разрыва страницы:

<div class="page-break"></div>

Это просто сработало.

Answer 2

Попробовал решение Джея, но не смог заставить его работать (возможно, конфликт с другими CSS)

Я получил его для работы с этим:

<p style='page-break-after:always;'></p>

Answer 3

У меня была такая же проблема, и я обнаружил кое-что, что могло бы помочь. Это был мой код разрыва страницы CSS:

.page-break {
  display: block;
  clear: both;
  page-break-after: always;
}

Это не сработало из-за ДВУХ причин:

I. В одном из импортированных файлов SASS у меня была эта строка кода:

html, body
  overflow-x: hidden !important

II. Другая проблема была в начальной загрузке

@import "bootstrap"

Похоже, из-за float: left в:

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}

разрыв страницы больше не работает. Итак, просто добавьте это после , вы импортируете начальную загрузку.

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: initial !important;
}

Answer 4

Ни одно из этих решений не помогло мне. Я нашел решение, которое помогло многим людям в вопросах самоцветов - https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1524

вы хотите добавить CSS на элемент, который требует разрыва страницы. В моем случае это были строки таблицы, поэтому я добавил:

tr {
 page-break-inside: avoid;
}

Answer 5

Убедитесь, что тег ссылки на таблицу стилей содержит media = 'print' или media = 'all', если вы используете внешнюю таблицу стилей:

<%= stylesheet_link_tag 'retailers_pdf',media: 'all' %>

или

<%= stylesheet_link_tag 'retailers_pdf',media: 'print' %>

в противном случае wicked_pdf не поднимет его.

Также обратите внимание, что если вы находитесь в середине таблицы или элемента div с рамкой, атрибуты разрыва страницы не будут работать. В этом случае пришло время разбить jQuery и начать разбивать вещи. Этот ответ: https://stackoverflow.com/a/13394466/2016616 имеет хороший фрагмент для измерения положения. Я работаю над чистым и повторяемым кодом разделения таблицы и опубликую его, когда закончу.

Answer 6

У меня была та же проблема, и в итоге мне удалось убедиться, что мой элемент с

page-break: always;

находится в корне документа, кажется, когда он вложен в другие элементы, особеннос назначенной высотой объявление игнорируется.

надеюсь, это кому-нибудь поможет.