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;
    }

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

    Browser preview

    これで 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 で、印刷時に背景色・背景画像を出力します。 sectionpage-break-before: alwaysを指定して、sectionの直前で改ページするようにします。 これは、もしsectionより大きなページで出力した場合でも、各sectionごとに改ページされるようにします。

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

    Print preview


    Profile picture

    Shin'ya Ueoka

    B2B向けSaaSを提供する会社の、元Webエンジニア。今はエンジニアリング組織のマネジメントをしている。