38

Ruby（1.9.2）Rails（3.0.x）で、wicked_pdfを使用してWebページをPDFとしてレンダリングしたいのですが、ページ分割の場所を制御したいと思います。ページ分割を制御するための私のCSSコードは次のとおりです。

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

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

4

6 に答える 6

66

どういうわけか、「@mediaprint」はそれを完全にはしませんでした。私はちょうど行きました

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

CSSルールの場合、ページ分割のために次の項目をページに貼り付けました。

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

それはうまくいきました。

于 2011-04-29T17:48:16.453 に答える
14

Jayのソリューションを試しましたが、機能させることができませんでした（おそらく他のCSSとの競合）

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

<p style='page-break-after:always;'></p>
于 2014-10-15T05:35:22.413 に答える
5

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

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

これは、次の2つの理由で機能しませんでした。

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;
}
于 2014-08-27T10:26:38.103 に答える
4

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

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

tr {
 page-break-inside: avoid;
}
于 2017-04-05T20:28:51.973 に答える
2

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

于 2013-04-13T20:57:30.143 に答える
1

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

page-break: always;

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

これが誰かに役立つことを願っています。

于 2014-01-17T18:58:46.080 に答える