Node.js Puppeteer – Capturing Website Screenshots | PDF, PNG, JPG

By Raddy in NodeJs · 4th September 2020

In this quick tutorial, we will look at Puppeteer which is a Node library that provides a high-level API control headless Chrome or Chromium over the DevTools Protocol. In particular, we will be exploring the web screenshot method which is very easy and fun to use. The screenshot method will allow us to save images in different formats such as pdf, png and jpeg.

Create A Simple Node.JS App to Test Chalk

Let’s start by creating a new Node.JS Project. To do that, create a new project folder and then run the following command in Command Line (Mac / Linux) or Powershell (Windows).

npm init

This will initialise a new project for you and it’s going to ask you a few questions about your project. The most important one is to give your package a name and then you can just keep pressing enter until the installation is over.

At this point, you should see a file called package.json in your project folder.

Dependencies Installation

The only dependency or NPM package that we need for this project is Puppeteer. You can add Nodemon if you don’t want to keep restarting the server manually. Let’s install both one by one as Nodemon is a development dependency:

[x] Puppeteer

Open the Command Line / Terminal / Powershell and install Chalk:

npm install puppeteer

Now let’s install nodemon. The reason that we are installing nodemon separately is that nodemon is a development dependency.

npm install nodemon --save-dev

Your packages.json file should look similar to this:

{
  "name": "node-puppeteer",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  },
  "dependencies": {
    "puppeteer": "^5.2.1"
  }
}

Note that the version of the dependencies might change in the future (most likely will).

Project Structure

Our project is going to be simple as all we want is to explore Puppeteer. Let’s create an App.js file and then we need to modify our package.json file to run with Nodemon.

📂 node_modules
🌍 app.js - create this file
📜 package-lock.json
📜 package-json

Nodemon Setup

Let’s tell Node.JS to start our App.js file with Nodemon. To do this, open the package.json file in your favourite editor and add another line under the scripts object called “start” just like in the example below:

{
  "name": "node-puppeteer",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  },
  "dependencies": {
    "puppeteer": "^5.2.1"
  }
}

You can call it dev, start or whatever you like.

Now we need to create our app and grab a screenshot.

Take a website screenshot with Node.JS

This is the final code which will take a screenshot using Puppeteer:

const puppeteer = require('puppeteer');

(async()=> {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://raddy.co.uk');

    page.setViewport({ width: 300, height: 2000 })
    await page.screenshot({ path: `screenshot${Date.now()}.png` });

    await browser.close();
})();

For the full explanation of the code, please watch the full video linked above.

Thank you for reading this article. Please consider subscribing to my YouTube Channel.

Author

Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: hello@raddy.co.uk