Puppeteer Tutorial #6 – Generate Screenshot and PDF Generation

In the realm of modern web development, automating routine tasks is a cornerstone of efficiency.

Puppeteer, a robust Node.js library by the Chrome team, empowers developers to script browser interactions seamlessly.

In this tutorial, we’ll delve into a practical example of using Puppeteer to capture a screenshot and generate a PDF from a webpage.

By following these steps, you’ll be equipped to harness the power of Puppeteer for your own projects.

The final completed source code is given at the end of the article.

Puppeteer’s ability to control browsers over the DevTools Protocol opens doors to a wide range of web automation tasks.

In this tutorial, we’ll focus on two crucial tasks: capturing screenshots and generating PDFs from web pages.

1. Setting Up Puppeteer

Before we dive into the code, ensure you have Node.js installed on your system. You can then install Puppeteer using the following command:

npm install puppeteer

2. Capturing Screenshots

Let’s begin by crafting a function that captures a screenshot of a given URL.

This function initiates a browser instance, navigates to the specified URL, captures a screenshot, and then closes the browser.

const puppeteer = require("puppeteer");

async function captureAndGeneratePDF(url, outputPath) {

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

        await page.goto(url);

        await page.screenshot({path: 'editsode-screenshot-9.png'});

        // Rest of the code...
    } catch(err) {
        console.log("Unable to generate Screenshot and PDF");
    }
}

const url ="https://google.com";
const outputPath = "episode-9.pdf";

captureAndGeneratePDF(url, outputPath);

3. Generating PDFs

Continuing from where we left off, we’ll extend our function to generate a PDF from the same webpage.

Puppeteer’s seamless integration makes generating a PDF as straightforward as capturing a screenshot.

// ...
await page.pdf({path: outputPath, format: 'A4'});

await browser.close();
console.log("Successfully generated screenshot and PDF");

4. Final Source Code

The final source code is shared below for your reference.

const puppeteer = require("puppeteer");

async function captureAndGeneratePDF(url, outputPath) {

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

        await page.goto(url);

        await page.screenshot({path: 'editsode-screenshot-9.png'});

        await page.pdf({path: outputPath, format: 'A4'});

        await browser.close();
        console.log("Successfully generated screenshot and PDF");

    } catch(err) {
        console.log("Unable to generate Screenshot and PDF");
    }
}

const url ="https://google.com";
const outputPath = "episode-9.pdf";

captureAndGeneratePDF(url, outputPath);

Puppeteer elevates the art of web automation by making complex tasks accessible and efficient. In this tutorial, we explored how to use Puppeteer to capture a screenshot and generate a PDF from a webpage. Armed with this knowledge, you can automate visual documentation, streamline report generation, and more.

As you delve further into Puppeteer, you’ll uncover its potential for an array of tasks that extend beyond this tutorial. From web scraping to performance monitoring, Puppeteer is your ally in crafting a seamless and efficient web experience. Happy automating!