備忘録

備忘録

Puppeteer を利用してWebページのスクリーンショットを撮る方法

Ⅰ. はじめに

タイトルの通り「Puppeteer を利用してWebページのスクリーンショットを撮る方法」です。

Ⅱ. やり方

1. Puppeteer をインストールする
npm install puppeteer
2. サンプルプログラムを書く

index.js

const puppeteer = require('puppeteer');

(async () => {
  // const browser = await puppeteer.launch({ defaultViewport: null, headless: false, slowMo: 300 });
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://google.com');
  await page.screenshot({path: 'out.png', fullPage: true});

  await browser.close();
})();
3. 実行する
node index.js
実行結果

out.png
f:id:kagasu:20180831155734p:plain

GUIを持たないLinuxで実行する場合

1. ライブラリをインストールする
apt update
apt install -y ca-certificates fonts-liberation libappindicator3-1 libasound2 libatk-bridge2.0-0 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgbm1 libgcc1 libglib2.0-0 libgtk-3-0 libnspr4 libnss3 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 lsb-release wget xdg-utils

# ReHat系
yum install -y alsa-lib.x86_64 atk.x86_64 cups-libs.x86_64 gtk3.x86_64 ipa-gothic-fonts libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXrandr.x86_64 libXScrnSaver.x86_64 libXtst.x86_64 pango.x86_64 xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-fonts-cyrillic xorg-x11-fonts-misc xorg-x11-fonts-Type1 xorg-x11-utils
2. 日本語フォントをインストールする
apt install -y fonts-ipafont-gothic fonts-ipafont-mincho

# RedHat系
yum -y install ipa-gothic-fonts ipa-mincho-fonts ipa-pgothic-fonts ipa-pmincho-fonts
3. サンプルプログラムを書く
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: true,
    args: [
      '--no-sandbox' // 必須
    ]
  });
  const page = await browser.newPage();
  await page.goto('https://google.com');
  await page.screenshot({path: 'out.png', fullPage: true});

  await browser.close();
})();
4. 実行する
node index.js
実行結果

out.png
f:id:kagasu:20180831155734p:plain

その他