ruby-on-rails - Rails: WickedPDF: 分页符

Question

在我的 Ruby (1.9.2) Rails (3.0.x) 中，我想使用 wicked_pdf 将网页呈现为 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

尝试了 Jay 的解决方案，但无法正常工作（可能与其他 css 冲突）

我得到了它的工作：

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

Answer 3

I had the same problem and I discovered something that might help. This was my page break CSS code:

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

This didn't work because of TWO reasons:

I. In one of the SASS imported file I had this line of code:

html, body
  overflow-x: hidden !important

II. The other problem was bootstrap

@import "bootstrap"

It looks like because of the float: left in:

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

the page break is no longer working. So, just add this after you import 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;
}

Answer 4

这些解决方案都不适合我。我确实在这里找到了适用于 gem 问题的许多人的解决方案 - 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;

位于文档的根目录上，似乎当它嵌套在其他元素中时，尤其是那些指定了高度的元素，声明被忽略了。

希望这可以帮助某人。