Node.js Puppeteer – Capturing Website Screenshots | PDF, PNG, JPG
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.
More Resources:
Author
Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]
