4

HTML ページから wkhtmltopdf を使用して PDF ファイルを生成しました。HTML ページは、1 ピクセルの境界線を持つテーブルを使用します。Acrobat または Foxit で PDF を開くと、垂直方向の境界線をランダムに描画できませんが、ズームインすると表示されます。線が細すぎるため、何らかの丸めエラーだと思いますか?

PDFを印刷すると見栄えがします。

そして、背景色を設定した場合にのみ発生することに気付きました。

どうすればこれを修正できますか?

ここにサンプルPDFがあります。ズーム倍率によっては、文字「a」と「b」の境界線が消えます。このファイルを次のように生成しました。

echo "
 <html><body>
  <span style="border: 1px solid black; background-color:red;">a</span>
  <span style="background-color:red">b</span>
 </body></html>"
| wkhtmltopdf.exe - test.pdf
4

3 に答える 3

6

あなたの行が欠けているわけではありません。小さすぎて画面に表示できません。

これは、ページ上の機能の大きさではなく、ページ サイズに従って PDF がレンダリングされるためです。ページ上のすべてが PDF ページに収まるように拡大または縮小されるため、線が縮小されて消えます: 1 / 3 = 0.333 = 線なし。

これを修正するには、次のオプションがあります。

  1. 以下を使用して、wkhtml2pdf のページ サイズを縮小します。--page-size A4
  2. 次を使用して、ページの幅と高さを正確に減らします。--page-width 9in --page-height 6in
  3. 線を太くします。

この場合、おそらくオプション 3 が望ましいでしょう。これはあまり洗練された修正ではありませんが、操作できるオプションは多くありません。低レベルで PDF を作成している場合は問題ありませんが、wkhtml2pdf を使用しているため、設定できる内容に制限があります。

于 2011-12-08T09:54:24.350 に答える
4

テーブルの境界線にも同様の問題がありました。私を助けたのは、cssのpt代わりに を使用することでした。px

W3Cを参照してください:

ただし、一般的には、紙に印刷する場合と画面に表示する場合では、異なる単位のセットを使用します。

于 2012-07-06T09:27:07.670 に答える
1

細い線が必要な場合、または幅を 1px に設定していない場合を想定しています。

wkhtmltopdf で作成された PDF に細い細い境界線を表示するための鍵は、次のように SVG 背景を使用することです。

.hairline-border {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><rect x='0' y='0' width='100%' height='100%'  stroke='black' fill='white' stroke-opacity='1' /></svg>");
}

ヘアライン セパレータ (考えて<hr>ください) の場合、次を使用します。

.hairline {
  height: 0.5mm;
  width: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0mm' y1='0mm' x2='300mm' y2='0mm' style='stroke:black; stroke-width:0.25mm;' /></svg>");
}

そして私はそれらを次のように使用します：

<div class="hairline-border"></div>

また、Firefox と Safari/Chrome では正しくレンダリングされ、wkhtmltopdf は少なくとも線幅をそのまま維持します。SVG の base64 変換により、IE との互換性が向上するという議論がありました。率直に言って、IE が満足しているかどうかは気にしませんが、必要に応じてInline SVG in CSSを参照してください。

于 2015-11-10T23:58:10.687 に答える