web-dev-qa-db-ja.com

ページ間で部分的に切り取られた単一行のWkhtmltopdf文字

Ruby on Rails（3.1））を使用してプロジェクトで作業しています。私の要件は、htmlコンテンツからpdfを生成することなので、pdfkit gemを使用します。

一部のページでは、1行の文字がページ間で部分的に切れています。私がhtmlを変換するとき、pdfkit gemを使用してpdfに変換します

wkhtmltopdfのバージョン：wkhtmltopdf-0.11.0 rc1

オペレーティングシステム：Linux CentOS 5.5

下の画像では、文字がページ間で部分的に切り取られています。

解決策を提案してください。

例1

enter image description here

例2

enter image description here

htmlruby-on-railsrubywkhtmltopdfpdfkit
41
amexn

私はこれに遭遇し、問題を解決する何かを見つけました。私の特定のケースでは、display: inline-block; margin-bottom: -20px;。マージン下部をブロックしてリセットするように変更すると、行の分割が消えました。 YMMV。

11
nvahalik

一部のドキュメント によると（改ページを参照）、これは既知の問題であり、CSS改ページを使用して改ページを挿入することを推奨しています（QTのパッチバージョンを使用している場合）。

WebKitの現在の改ページアルゴリズムには、まだ多くの要望があります。基本的に、webkitはすべてを1つの長いページにレンダリングしてから、ページに切り分けます。つまり、テキストが2列あり、1列が垂直方向に半行シフトしている場合です。次に、Webkitは1行に分割して1ページの上半分を表示します。そして、別のページの下半分。また、イメージが2つに分割されます。パッチが適用されたバージョンのQTを使用している場合は、CSSのpage-break-insideプロパティを使用してこれを多少改善できます。この問題を簡単に解決する方法はありません。これが解決するまで、ページをきれいにカットできる多くの行が含まれるようにHTMLドキュメントを整理してみてください。

参照： http://code.google.com/p/wkhtmltopdf/issues/detail?id=9 、 http://code.google.com/p/wkhtmltopdf/ issues/detail？id = と http://code.google.com/p/wkhtmltopdf/issues/detail?id=57 です。

9
Peter Brown

私はテーブルでこの問題を抱えていました：

enter image description here

次に、これをCSSに追加しました。

table, img, blockquote {page-break-inside: avoid;}

これで問題が解決しました：

enter image description here

8
Besi

私の場合、問題は次のcssをコメントアウトすることで解決しました。

html, body {
  overflow-x: hidden;
}

一般に、タグにoverflowがhiddenとして設定されているかどうかを確認し、削除するかvisibleに設定します。

ところで、私はwkhtmltopdf version 0.12.2.1 Windows 8の場合。

2
Pedro M Duarte

以下のようにmargin-topとmargin-bottomを追加する問題を解決しました：

$this->get('knp_snappy.pdf')->generateFromHtml($html, $pdfFilepath, [
        'default-header' => false,
        'header-line' => false,
        'footer-line' => false,
        'disable-javascript' => true,
        'margin-top' => '3mm',
        'margin-bottom' => '3mm',
        'margin-right' => '5mm',
        'margin-left' => '5mm',
        'orientation' => 'Landscape',
    ], true);
0
Pawel Kolodziejuk

カットテキストの問題はWebkitの既知の問題であり、開発者がwkhtmltopdf内に解決策を見つけたようです。 0.12.1に更新すると、カットテキストの問題が修正されます（コンパイルで時間を無駄にしたくない場合は、ここからバイナリファイルを取得できます： https://github.com/h4cc/wkhtmltopdf -AMD64 ）。

0
Dragos Rusu

これは古いですが、うまくいけば誰かを助けるでしょう-私も問題を抱えていて、すべてを試しました-言及された古いバージョン（12.1）に頼ることもできましたが、役に立ちませんでした。私はcssをいじって遊んだり、改ページを入れようとしたりして、どこでも避け、あまり進歩していません。次に、htmlのルートdivにあるcssを微調整し、修正しました。私はそれを機能させるために多くの微調整を行ったので100％確実ではありませんが、問題はマージンが0の「display：table」に設定されていて、メインの外側のdivに特定の幅があることだと思います。それが機能し始め、いったんそれを削除すると、画像や行の途中で途切れることはありませんでした。その後、改ページインサイド：回避はその後期待どおりに機能していました。

私は最終的に、コードが各ページの高さをピクセル数で正確に、正確に（ピクセルまでの）コンテンツがどこにあるかを推測しようとしていると思います。ライブラリが奇数のcssをできるだけ削除することで、ライブラリがこれを簡単に検出できるようにする必要があるため、コンテンツが存在するピクセルまで計算するのはできるだけ簡単です。それは私の推測です。

0
Rob

私はこの問題を克服しようとして、数週間インターネットを調べました。私が見つけた解決策はどれも私にとってはうまくいきませんでしたが、何か他のことがうまくいきました。

テキストが途中で途切れる2列のレイアウトがありました。壊れた状態では、私の基本的な構造は次のようになりました。

@media print {
  * {
    page-break-inside: avoid;
    page-break-after: avoid;
    page-break-before: avoid;
  }
}
.col-9{
  display: inline-block;
  width: 70%;
}
.col-9{
  display: inline-block;
  width: 25%;
}

<div class="col-9">
  [a lot of text here, that would spill over multiple pages]
</div>
<div class="col-3">
  [a short sidebar here]
</div>

私はそれを次のように変更して修正しました：

@media print {
  * {
    page-break-inside: avoid;
    page-break-after: avoid;
    page-break-before: avoid;
  }
}

.col-9{
  display: block;
  float: left;
  width: 70%;
}
.col-9{
  display: block;
  float: left;
  width: 25%;
}
.clear{
  clear: both;
}

<div class="col-9">
  [a lot of text here, that no longer split mid-line.]
</div>
<div class="col-3">
  [a short sidebar here]
</div>
<div class="clear"></div>

何らかの理由で、ツールは表示を処理できませんでした：インラインブロックセットアップ。フロートで動作します。バージョン0.12.4を実行しています。

0
Mike Caputo