Edited at

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

More than 1 year has passed since last update.


概要

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