PuppeteerでWebページをPDF化する

初めに

WebページPDF化したかったので、どうせなら自動化したいと思い方法を調べました。
Puppeteerというツールを使うとできそうなので試してみようと思います。

Puppeteerとは

Puppeteerとはブラウザを操作するJavascriptライブラリです。
様々なブラウザ操作をコードで行うことができます。

WebサイトをPDF化する

PDF化するのは様々な記事で解説されています。
この記事では、ログインが必要なWebサイトのページをPDF化する処理を書いてみましょう。

今回は架空の会員制サイトをローカルで立ち上げ、そのサイトに対して操作を行います。

• ログインページを開く
• ブラウザ操作でログインフォーム入力 & ログイン
• ログイン後のページをPDF化

準備：架空の会員制サイトの作成

Claude Codeに書いてもらいました。
相変わらず綺麗に作ってくれますね～。

ログイン画面

トップページ

PuppeteerでPDF取得

上のサイトにログインしてPDFを取得する処理を書いていきましょう。
まずはPuppeteerをインストールします。

npm install puppeteer

続いてコードを書いていきましょう。
以下はログイン & PDF化するコードです。
Claude Codeに書いてもらったので、理解していきましょう。

generate-pdf.js

const puppeteer = require('puppeteer');

async function generatePDF() {
  const browser = await puppeteer.launch({
    headless: false
  });
  
  try {
    const page = await browser.newPage();
    
    console.log('ログインページにアクセス中...');
    await page.goto('http://localhost:3000/login');
    
    await page.waitForSelector('#username');
    
    console.log('ログイン情報を入力中...');
    await page.type('#username', 'admin');
    await page.type('#password', 'password');
    
    console.log('ログインボタンをクリック...');
    await page.click('button[type="submit"]');
    
    console.log('ダッシュボードの読み込み待機中...');
    await page.waitForNavigation();
    await page.waitForSelector('.dashboard');
    
    console.log('ページの完全な読み込み待機中...');
    await new Promise(resolve => setTimeout(resolve, 2000));
    
    console.log('PDF生成中...');
    const pdfBuffer = await page.pdf({
      path: 'dashboard.pdf',
      format: 'A4',
      printBackground: true,
      margin: {
        top: '20px',
        bottom: '20px',
        left: '20px',
        right: '20px'
      }
    });
    
    console.log('PDF生成完了: dashboard.pdf');
    
  } catch (error) {
    console.error('エラーが発生しました:', error);
  } finally {
    await browser.close();
  }
}

generatePDF();

ポイント1：ブラウザを立ち上げる

実際にログインするところを見てみたかったのです、headless: falseで実際にブラウザを立ち上げています。

  const browser = await puppeteer.launch({
    headless: false
  });

ポイント2：フォーム入力 & ログイン

立ち上げたブラウザでログインページを立ち上げ、フォーム入力 & ログインします。
newPage()でページのオブジェクトを作成します。

• page.goto()：画面遷移
• page.type()：IDを指定して入力
• page.click()：IDを指定してボタンクリック
• page.waitForNavigation();：画面の読み込み待ち
• page.waitForSelector();：指定した要素のDOM描画待ち

    const page = await browser.newPage();
    
    console.log('ログインページにアクセス中...');
    await page.goto('http://localhost:3000/login');
    
    await page.waitForSelector('#username');
    
    console.log('ログイン情報を入力中...');
    await page.type('#username', 'admin');
    await page.type('#password', 'password');
    
    console.log('ログインボタンをクリック...');
    await page.click('button[type="submit"]');
    
    console.log('ダッシュボードの読み込み待機中...');
    await page.waitForNavigation();
    await page.waitForSelector('.dashboard');

ポイント3：

page.pdf()で開いているページをPDF化します。

• path：出力するPDFファイルのパス
• format：出力する用紙のフォーマット
• printBackground：背景の色を出力するかどうか。falseにすると白抜きになる。
• margin：出力時のマージンの幅

その他オプションは以下で確認できます。

    const pdfBuffer = await page.pdf({
      path: 'dashboard.pdf',
      format: 'A4',
      printBackground: true,
      margin: {
        top: '20px',
        bottom: '20px',
        left: '20px',
        right: '20px'
      }
    });
    

実行

それでは実行しましょう。

node .\generate-pdf.js
ログインページにアクセス中...
ログイン情報を入力中...
ログインボタンをクリック...
ダッシュボードの読み込み待機中...
ページの完全な読み込み待機中...
PDF生成中...
PDF生成完了: dashboard.pdf

実行中はブラウザが立ち上がり、E2Eテストのように自動で動作されます。

動作	キャプチャ
ログイン 表示
入力 & ログイン
ログイン 完了

こちらが実際に出力されたPDFファイルです。いい感じですね！

終わりに

今回はPuppeteerを使いWebページをPDF化してみました。
今までブラウザ操作はPlaywrightを利用していたのですが、Puppeteerも便利ですね。違いなどはまた調べてみようと思います。

話はそれますが、ClaudeCodeのおかげで動作確認のハードルが下がりましたね。
今回は架空のサイトをvueで作成してもらいましたが、どうせなら生成されたコードをみてvueやcssを学ぶのもいいかもしれません。

ここまでご覧いただきありがとうございました！