Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
26
Help us understand the problem. What is going on with this article?
@t-toyota

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

More than 3 years have 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のリファレンス

26
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
t-toyota
プログラムをする人です。
weboar
技術と発想で 「嬉しい」を形にするスタートアップ

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
26
Help us understand the problem. What is going on with this article?