Puppeteer Tutorial #9 – Automating Web Page Screenshots and PDF Generation

Puppeteer is a powerful Node library that provides a high-level API to control headless browsers or full browsers over the DevTools Protocol.

In this tutorial, we’ll explore how to use Puppeteer to automate the process of capturing a screenshot and generating a PDF from a web page.

Prerequisites

Make sure you have Node.js installed on your machine. You can download it from Node.js official website.

Step 1: Setting Up a Node.js Project

Create a new Node.js project and install Puppeteer as a dependency.

mkdir puppeteer-tutorial
cd puppeteer-tutorial
npm init -y
npm install puppeteer

Step 2: Writing the Puppeteer Script

Now, let’s create a simple script that uses Puppeteer to open a web page, capture a screenshot, and generate a PDF.

// Import the Puppeteer library
const puppeteer = require("puppeteer");

// Function to capture a screenshot and generate a PDF
async function captureAndGeneratePDF(url, outputPath) {
    try {
        // Launch a new browser
        const browser = await puppeteer.launch({ headless: false });
        const page = await browser.newPage();

        // Navigate to the specified URL
        await page.goto(url);

        // Capture a screenshot and save it as a PNG file
        await page.screenshot({ path: 'screenshot.png' });

        // Generate a PDF from the page and save it to the specified path
        await page.pdf({ path: outputPath, format: 'A4' });

        // Close the browser
        await browser.close();
        console.log("Successfully generated screenshot and PDF");
    } catch (err) {
        console.log("Unable to generate Screenshot and PDF");
    }
}

// URL of the web page to capture
const url = "https://google.com";

// Output path for the generated PDF
const outputPath = "output.pdf";

// Call the function with the specified URL and output path
captureAndGeneratePDF(url, outputPath);

Step 3: Running the Script

Save the script in a file, for example, capture.js. Now, run the script using Node.js.

node capture.js

This will open a new browser window, navigate to the specified URL (https://google.com), capture a screenshot, and generate a PDF named output.pdf.

Conclusion

Congratulations! You have successfully automated the process of capturing a screenshot and generating a PDF from a web page using Puppeteer.

This can be a useful tool for various scenarios, such as website testing, report generation, and more.

Explore Puppeteer’s extensive documentation to discover additional features and capabilities that can be integrated into your projects.

Happy coding!