web-dev-qa-db-ja.com

Rails：WickedPDF：改ページ

自分のRuby（1.9.2）Rails（3.0.x）WebページをPDF = wicked_pdfを使用していて、改ページの場所を制御したい場合改ページを制御するCSSコードは次のとおりです。

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

ただし、ページを wicked_pdf でレンダリングすると、ドキュメントが2ページに分割されません。 wicked_pdfで改ページを取得するために他に何かしなければならないことはありますか？

ruby-on-railspdfpage-break
36
Jay Godse

何らかの理由で、「@ media print」はそれを完全に実行しませんでした。私はついた

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

cSSルールの場合、改ページのために次のコードをページに貼り付けました。

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

うまくいきました。

61
Jay Godse

ジェイの解決策を試してみましたが、機能させることができませんでした（おそらく他のcssと競合しています）

これで動作するようになりました：

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

私も同じ問題を抱えていて、何か役に立つかもしれないものを発見しました。これは私の改ページCSSコードでした：

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

[〜＃〜] two [〜＃〜]の理由により、これは機能しませんでした：

I。SASSでインポートされたファイルの1つに次のコード行があります：

html, body
  overflow-x: hidden !important

II。もう1つの問題はブートストラップでした

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

これらの解決策はどれも私にとってうまくいきませんでした。私はここで宝石の問題で多くの人に役立つ解決策を見つけました- https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1524

改ページが必要な要素にCSSを追加したい。私の場合、それはテーブル行だったので、私は追加しました：

tr {
 page-break-inside: avoid;
}
3
nfriend21

外部スタイルシートを使用している場合は、スタイルシートのリンクタグに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 は、位置測定に適したスニペットです。私はクリーンで繰り返し可能なテーブル分割コードに取り組んでおり、終了したらそれを投稿します。

2
mikeryz

私は同じ問題を抱えていて、結局私のために働いたのは、私の要素が

page-break: always;

ドキュメントのルートにありました。他の要素、特に高さが割り当てられている要素の中にネストされている場合、宣言は無視されます。

これが誰かを助けることを願っています。

1
David Morrow