邪恶的 PDF 无法处理分页符答案

【问题标题】：Wicked PDF unable to handle page break邪恶的 PDF 无法处理分页符
【发布时间】：2016-07-12 08:23:01
【问题描述】：

我在生成报告的 Rails 应用程序中使用 gem wiked_pdf。

但是当我拥有超过 1 页时，我无法解决数据中断问题。

请看图。

我尝试了很多次调整边距或间距，但仍然无法修复。

respond_to do |format|
  format.html
  format.pdf do
    render title:         @report_title,
           pdf:           @report_title,
           template:      'applicants/generate_report.pdf.erb',
           encoding:      'UTF-8',
           orientation:   'Landscape',
           layout:        'pdf_template.html',               
           footer: {
                    center:    '[page] of [topage]',
                    right:     "",
                    font_name: 'Arial',
                    font_size: 8                        
                   },
           margin: {
                    top:     10, # default 10 (mm)
                    bottom:  12,
                    left:    7,
                    right:   7 
                   },
          spacing: 0
  end
end

我也尝试过应用 CSS，比如：

@media print {
  td, tr {page-break-inside: avoid; }
  table.full_report_table>tbody>tr>td {page-break-inside: avoid !important; }
}

没有任何效果！

请帮忙！

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-4 wicked-pdf

【解决方案1】：

已解决

是的，

page-break-inside：避免；

它在 div 标签中工作正常。

但我花了一段时间并进行了粗略的研究，以弄清楚如何使其与长桌一起使用。

添加一些 CSS 样式对我有用。

如文档W3 page-break 中所述，它将与块元素一起使用。

我所做的是将显示样式与它一起添加。

<tr style="page-break-inside: avoid; display: inline-table;">

inline-table 或 inline-block 都适用于我的情况。

我希望这会帮助遇到与我相同的错误的其他人。

【讨论】：

display: inline-block; 除了page-break-inside: avoid; 是最终让这对我有用的东西。我认为这两者的结合需要更加强调。感谢您这样做！
是的。它解决了这个问题。但是display: inline-table中存在对齐问题
@aldrien 分页问题已解决，但由于显示：inline-table CSS，我的设计被破坏了，您能建议我解决吗？

【解决方案2】：

您需要创建一个类并将下面的 CSS 应用到其中：

div.alwaysbreak { page-break-before: always; }

例如，就我而言：

<div class="alwaysbreak">
   // My PDF Template
</div>

希望这会有所帮助..！

【讨论】：

嗨@Hardik，我刚刚尝试了wicked_pdf 文档中给定的css。似乎样式仅适用于
而不适用于 table ？但目前我的模板使用表格，因为它呈现很多数据。
我已经实现了同样的，它对我有用.. 你是否使用wicked_pdf_stylesheet_link_tag 包含 CSS ？
嗨@Hardik，是的，我使用了 wicked_pdf_stylesheet_link_tag 在我的 pdf 模板上声明了 sa CSS。您是否尝试在 tr 或 td 标签中使用该 CSS？对我不起作用。

【解决方案3】：

我过去通过使用 css page-break-inside: avoid; 将每个表行包装在 div 中来解决此问题。

我知道它在语义上不正确，但它确实有效。

这应该确保它在不切断行中间的表格内容的情况下转换页面：

<style>
  .nobreak:before {
    clear: both;
  }
  .nobreak {
    page-break-inside: avoid;
  }
</style>
<table>
  <div class="nobreak">
    <tr>
      <td>First row</td>
    </tr>
  </div>
  <div class="nobreak">
    <tr>
      <td>Second row</td>
    </tr>
  </div>
</table>

【讨论】：

我尝试添加边框以查看它的呈现方式，但由于 HTML 结构无效，它无法正常工作。
嗯。肯定习惯了。也许试试<tr> 里面的div？作为替代方案，您可以将每一行设为自己的表格，并将其包装在 div 中。这意味着您的<td> 可能需要固定宽度，否则它看起来不会太像一张桌子。

【解决方案4】：

简单地在您的 html 代码的最后放置一个 div。喜欢

<% @questions.each do |question| %>
  <% if question.id == @questions.last.id %>
    <div></div>
  <% end %>
<% end %>

在你的 html 中添加一个部门后，在你的 css 中添加以下行：

div.alwaysbreak { page-break-before: always; }
div.nobreak:before { clear:both; }
div.nobreak{ page-break-inside: avoid; }

对我有用

【讨论】：