Chrome
PDF
puppeteer

ヘッドレスブラウザの Puppeteer を利用して WEB ページを PDF 出力してみる。

概要

ヘッドレスブラウザの Puppeteer を利用して、 WEB ページを PDF に出力してみました。

内容

Puppeteer とは?

PhantomJS や NightmareJS と同じ GUIを提供していないブラウザです。
Chrome ベースで作成されており、提供元が GoogleChrome と同じなので、 PhantomJS の様に、開発・サポート終了などのリスクは少ないと思います。

Puppeteer GitHub

導入

  • yarn の場合
$ sudo yarn add puppeteer
  • npm の場合
$ sudo npm i puppeteer

サンプルコード

ここでは、Google の TOP ページを PDF 出力するサンプルを用意します。

outputPdf.js
const fs = require('fs');
const assert = require('assert');
const puppeteer = require('puppeteer');

(async() => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // PDF出力対象ページ
  await page.goto('https://www.google.co.jp/');

  // PDF作成処理
  await page.pdf({
    path: 'google_top.pdf',
  });

  browser.close();
  console.log('PDF出力完了');
})();

実行

$ node test.js

たったこれだけで、PDF が出来てしまいます。

PDF出力機能チートシート

これだけだと味気なさすぎるので PDF 出力機能の チートシートも用意しました。

パラメータ名 デフォルト値 説明
path String なし PDF ファイルの出力パスで、指定しないと PDF 出力されない。
scale Number 1 1=100%を基準に、印刷ページを拡大・縮小できる。
displayHeaderFooter Boolean false ヘッダーとフッターを表示有無を設定できる。
printBackground Boolean false 背景画像の表示有無を設定できる。
landscape Boolean false 印刷用紙の向きを変更できる。
pageRanges String なし 印刷するページ範囲を指定できる。(指定例: '1-5,8,11-13')
format String 'Letter' 用紙フォーマットを指定できる。width、heightオプションのほうが優先。
width String なし 用紙の幅を指定できる。(指定例: '10cm')
height String なし 用紙の高さを指定できる。(指定例: '10mm')
margin Object none 用紙の余白。top、right、left、bottomでそれぞれの余白を指定できる。|

width、height、margin で利用可能な単位

  • px(デフォルト)
  • in
  • cm
  • mm

format 指定種類

  • Letter
  • Legal
  • Tabloid
  • Ledger
  • A0〜5

終わりに

公式のリファレンスがスゴくわかりやすく、ほとんどコードを書かずに PDF 出力が実現が出来てしまいました。
他のヘッドレスブラウザができる機能はほとんど網羅していそうなのと、今後スタンダードになっていきそうな気配があるので
また何かの実験結果を記事にしてみたいと思います。

Puppeteerのリファレンス