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

В моем 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?

Ответы

Ответ 1

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

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

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

или

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

иначе wicked_pdf не заберет его.

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

Ответ 4

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

page-break: always;

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

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

Ответ 5

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

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

Это не сработало из-за причин TWO​​strong > :

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

html, body
  overflow-x: hidden !important

II. Другой проблемой был bootstrap

@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;
}

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

.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;
}

Ответ 6

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

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

tr {
 page-break-inside: avoid;
}