2017-07-24

CSSでPDF出力をいい感じに設定する

CSS には印刷のスタイルを指定できるルール・プロパティが用意されています。そして Chromium や Google Chrome は標準で PDF 出力ができます。つまり厄介な PDF ファイル作成を CSS で簡単にできるようになります。この記事は、CSS でいい感じに PDF 出力する例を説明します。

サンプルは CodePen で公開しています。
https://codepen.io/ueokande/pen/yoBwrq

CSS の印刷サポート

CSS には、以下のような印刷の設定ができるルール・プロパティが用意されています。

@media print { ... }: このルール内に記述された CSS は、印刷時のみ適用される。
@page { ... }: 印刷時のページサイズやマージンを指定する。
page-break-beforeプロパティ: 要素の直前で改ページを制御する
page-break-afterプロパティ: 要素の直後で改ページを制御する
page-break-insideプロパティ: 要素の中で改ページを制御する
-webkit-print-color-adjustプロパティ ...要素の背景色、背景画像を印刷するかを指定する

例: スライドを出力

プレゼンテーションのスライドを例にします。

まず、こんな感じの HTML を用意します。

<section>
  <h1>What is Lorem Ipsum?</h1>
  <ul>
    <li>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </li>
    <li>
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book.
    </li>
  </ul>
</section>
<section>...</section>
<section>...</section>
<section>...</section>

そして CSS でsectionのスタイルを適用します。

section {
  width: 640px;
  height: 480px;
  display: inline-block;
  margin: 12px;
  box-shadow: 0 0 4px black;
  box-sizing: border-box;
}

するとこんな感じの、スライドのような感じで表示されます。

これで 1 ページ 1sectionで出力できるように CSS を指定します。適用した CSS は次のような感じです。

@media print {
  @page {
    size: 640px 480px;
    margin: 0;
  }

  * {
    -webkit-print-color-adjust: exact;
  }

  body {
    margin: 0;
    padding: 0;
  }

  section {
    margin: 0;
    box-shadow: none;
    page-break-before: always;
  }
}

まず@pageルールで、印刷時の余白を 0 にして、ページサイズをsectionと一致させます。 -webkit-print-color-adjust: exact で、印刷時に背景色・背景画像を出力します。 sectionにpage-break-before: alwaysを指定して、sectionの直前で改ページするようにします。これは、もしsectionより大きなページで出力した場合でも、各sectionごとに改ページされるようにします。

Chromium/Google Chromium で印刷ダイアログを表示して、1 ページ 1sectionのようにプレビューされれば OK です。