2017-02-06 8 views
0

私はちょうど何かを普通に(インターネットはちょうど金鉱、特にこのサイト)尋ねる必要はありませんが、これは私が2日間この作業をしようとしていて、私はしていません有用なものを見つける。私が見つけなかったので、同様の投稿のリンクは創設されれば感謝します。始めましょう。 なぜPDFKitがマージンでうまく動作しないのですか?


私はPython 2.7とDjango 1.9でPDFKitを使用して、HTMLからPDFへの生成を行っています。簡単な作業。 HTMLは、ちょうど次のようになります。私はただのマージンやパディングを追加しない、両方のケースで

{ 
    "page-width": "229mm", 
    "page-height": "162mm", 
    "paper-size": "CE5", 
    "encoding": "utf-8" 
} 

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <style type="text/css"> 
    * { 
     /* Box-model */ 
     margin: 0; 
     padding: 0; 
    } 

    .wrapper { 
     /* Box-model */ 
     width: 229mm; 
     height: 161mm; 
    } 
    </style> 
</head> 
<body> 
    {% for someone in people %} 
    <div class="wrapper"> 
    <p><strong>{{ someone.complete_name }}</strong></p> 
    <p>{{ someone.bio }}</p> 
    </div> 
    {% endfor %} 
</body> 
</html> 

マイPDFKitオプション次のようになります。私はPDFを生成し、素晴らしく見えます(驚きはありません。 しかし、HTMLおよび/またはオプションに余白/パディングを追加すると、PDFが生成されたときに継続的に繰り返し増分マージンが得られます(50ページの例では最初の余白に余白がなく、 50thは約2本程度の余裕があります)。私はマージン、パディング、高さの異なる組み合わせを試しました。余白やパディングを追加するだけで、PDFが狂ってしまいます。

は(注:ええ、ページの高さは、HTMLで高さより1ミリメートル大きいが、ラッパーは、PDFのページに収まるように、それが必要とされています)。

誰もこの前にこの問題を抱えていましたか?前もって感謝します。

答えて

0

[OK]を、私は最終的に起こっていたかを理解するために管理:

のは、私は用紙サイズA4(リストhereを持っている)を印刷したいとしましょう。したがって、pxに変換すると(手動でピクセルを計算する代わりにcmまたはmmを設定する方が簡単です)、これはです。 CSS height: Xmmを設定しました。簡単です。 PDFKitが、それは私が知っていることから、WebKitのを使用していること、HTMLをレンダリングするとき

問題が得る:私は場合はWebKitのはわずか3小数精度の点の値を持っているので、私たちの3.779528パスが3.779する(それがダウンに向けて丸め覚えておいてください)、実際のサイズではありません。つまり、マージン/パディング/ポジショニングのタイプを追加すると、たとえ同じディメンションユニットを使用しても、長さが正しくないため、物事が壊れて魔法の間隔が作成されることを意味します。

良いニュースは、マージン/パディング/ポジショニングを設定しないと物事が損なわれないということです。そのため、十分なものがあります。

しかし、余白などを追加する必要がある場合はどうすればよいですか? CSSのpage-breakのプロパティ(リンクされたものはpage-break-after)が救助に来ます。 HTMLを印刷するときに、(レンダリング、ウェブブラウザ経由で)魔法の間隔が設定されていないことを保証します。

口座にそれを取ると、例では、このようになります:

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
    * { 
     /* Box-model */ 
     /* To ensure no unexpected magic spacing */ 
     margin: 0; 
     padding: 0; 
    } 

    .wrapper { 
     /* Box-model */ 
     width: 197mm; /* + 100 from horizontal padding = 297 */ 
     height: 160mm; /* + 50 from vertical padding = 210 */ 
     padding: 25mm 50mm; 
    } 

    /* The selector applies the page break after, so we have to exclude the last wrapper */ 
    .wrapper:not(:last-of-type) { 
     /* Box-model */ 
     page-break-after: always; 
    } 
    </style> 
</head> 
<body> 
    {% for someone in people %} 
    <div class="wrapper"> 
    <p><strong>{{ someone.complete_name }}</strong></p> 
    <p>{{ someone.bio }}</p> 
    </div> 
    {% endfor %} 
</body> 
</html> 

出来上がり、あなたは魔法の間隔で、PDFデータをレンダリングするために完全にフィットテンプレートを持っています。ページを表現するために使用する要素(この例ではwrapper)がページと同じディメンションを持つようにする必要があります。