備忘録

備忘録

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

Ⅰ. はじめに

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

Ⅱ. やり方

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

index.js

const puppeteer = require('puppeteer');

(async () => {
  // const browser = await puppeteer.launch({ 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 install -y libx11-xcb1 libxcomposite1 libxcursor1 libxdamage1 libxi6 libxtst6 libcups2 libxss1 libxrandr2 libasound2 libpangocairo-1.0-0 libatk1.0-0 libatk-bridge2.0-0 libgtk-3-0

# ReHat系
yum -y install libX11 libXcomposite libXcursor libXdamage libXext libXi libXtst cups-libs libXScrnSaver libXrandr alsa-lib pango atk at-spi2-atk gtk3 
2. 日本語フォントをインストールする
apt install -y fonts-ipafont-gothic fonts-ipafont-mincho

# RedHat系
sudo 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({
    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

その他