2011-04-27 24 views
28

私のRuby(1.9.2)Rails(3.0.x)ではwicked_pdfを使用してWebページをPDFとしてレンダリングしたいので、改ページの場所を制御したいと思います。Rails:WickedPDF:改ページ

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

をしかし、私はwicked_pdfでページをレンダリングするとき、それは2つのページにドキュメントを分離しない:改ページを制御するために、私のCSSコードは次のとおりです。 wicked_pdfでページ区切りを取得するために何か必要なことはありますか?

答えて

48

何らかの理由で、「@media print」はそれほど効果がありませんでした。私は、CSSルールの

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

と一緒に行きました、そして私は、改ページのための私のページに次のように立ち往生:

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

だけで働いていました。

+0

スペースを処理するためにブートストラップと.spanXを使用している場合、page-break- *属性が機能している可能性があります。ブートストラップの.spanXはあなたが望む効果を妨げるfloatを使います。この場合、両方ともクリアします。おそらくあなたのためにその問題を解決しました。 – jaredsmith

+0

これは私のOSX上で動作するのですが、実稼働環境のLINUXではありません。 – mariowise

2

スタイルシートのリンクタグがメディア= '印刷」またはメディア= 『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は位置測定のための良いスニペットを持っています。私は、きれいで繰り返し可能なテーブル分割コードに取り組んでおり、終了したらそれを投稿します。

1

私は同じ問題を持っていたし、その、他の要素、特にものの内にネストされたときにどのような私のために働くことになったことは

page-break: always; 

と私の要素は、文書のルート上にあったことを確認した、と思われます高さが割り当てられている場合、宣言は無視されます。

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

2

私は同じ問題を抱えており、助けになるかもしれない何かを発見しました。これは私の改ページのCSSコードだった:

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

これが原因のTWO理由から動作しませんでした:

:私はこのコード行を持っていたSASSインポートされたファイルの一つで

I.を

html, body 
    overflow-x: hidden !important 

II。改ページは、もはや働いている

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

:他の問題は、それがであるためfloat: leftのように見えるん

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

はジェイのソリューションを試みたが、それは(多分、他のCSSとの競合)を動作させることができなかった

私はそれがこれで動作するようになった。これらのソリューションの

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

なしのために働いていません私。 https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1524

改ページが必要な要素にCSSを追加したい場合は、ここで多くの人に役立つ解決策を見つけました。私の場合はテーブル行だったので、私は追加しました:

tr { 
page-break-inside: avoid; 
}