ヘッドレスブラウザの 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のリファレンス