はじめてのPDF

インストールが済んでいる前提で、1枚出すところから改ページまでを順に試します。

1. 変換する

hello.htmlを用意します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      body { font-family: sans-serif; }
      h1 { border-bottom: 2px solid #333; padding-bottom: 8px; }
      .total { text-align: right; font-size: 1.2em; font-weight: bold; }
    </style>
  </head>
  <body>
    <h1>請求書</h1>
    <p>いつもお世話になっております。下記のとおりご請求申し上げます。</p>
    <p class="total">合計 ¥12,000</p>
  </body>
</html>

変換します。

sghtmltopdf hello.html -o hello.pdf

出力先(-o)を省略すると、入力の拡張子を.pdfにしたファイル名になります。 -を使うと標準入力から読み、標準出力へ書けます。

cat hello.html | sghtmltopdf - -o - > hello.pdf

2. 用紙と余白を決める

sghtmltopdf hello.html -o hello.pdf \
  --page-size A4 --margin-top 20mm --margin-bottom 20mm

単位はmm/cm/in/pt/pxが使え、省略するとmmです。

同じことはCSSの@pageでも書けます。両方書いた場合はCSSが勝ちます(CLIオプションは初期値として扱われます)。 wkhtmltopdfと逆なので、移行時はwkhtmltopdfからの移行を確認してください。

@page {
  size: A4;
  margin: 20mm;
}

3. 改ページする

「ここから次のページ」は、CSSのbreak-beforeで指定します。

<style>
  .page-break { break-before: page; }
</style>

<h1>請求書</h1>
<p>1ページ目です。</p>

<div class="page-break">
  <h1>明細</h1>
  <p>2ページ目です。</p>
</div>

break-after(この要素の後で改ページ)、break-inside: avoid(この要素を分割しない)も使えます。見出しだけが行末に取り残されるのを防ぐorphans/widowsもあります。詳しくはページ分割を参照してください。

4. ヘッダーとフッターを付ける

sghtmltopdf hello.html -o hello.pdf \
  --header-center "請求書" \
  --footer-right "[page] / [topage]" \
  --header-line

[page]は現在のページ番号、[topage]は総ページ数に置き換わります。 JavaScriptは実行しないため、この置換で表現します。 HTMLでヘッダーを作りたい場合は--header-htmlが使えます。

5. フォントを固定する

ここまでの例はシステムのフォントを使っています。サーバやCIで出力を環境に依存させたくない場合は、フォントファイルを明示してください。

sghtmltopdf hello.html -o hello.pdf \
  --font NotoSansJP-Regular.ttf \
  --gothic-font NotoSansJP-Regular.ttf