Home Code Tutorials How to turn web pages into PDFs with Puppeteer and NodeJS

How to turn web pages into PDFs with Puppeteer and NodeJS

11 min read

As an internet developer, you will have needed to generate a PDF file of an internet web page to share along with your shoppers, use it in shows, or add it as a brand new characteristic in your internet app. Irrespective of your purpose, Puppeteer, Google’s Node API for headless Chrome and Chromium, makes the duty fairly easy for you.

On this tutorial, we are going to see methods to convert internet pages into PDF with Puppeteer and Node.js. Let’s begin the work with a fast introduction to what Puppeteer is.

What’s Puppeteer, and why is it superior?

In Google’s personal phrases, Puppeteer is, “A Node library which offers a high-level API to regulate headless Chrome or Chromium over the DevTools Protocol.”

[Read: Meet the 4 scale-ups using data to save the planet]

What’s a headless browser?

In case you are unfamiliar with the time period headless browsers, it’s merely a browser with out a GUI. In that sense, a headless browser is just simply one other browser that understands methods to render HTML internet pages and course of JavaScript. As a result of lack of a GUI, the interactions with a headless browser happen over a command line.

Despite the fact that Puppeteer is principally a headless browser, you’ll be able to configure and use it as non-headless Chrome or Chromium.

What are you able to do with Puppeteer?

Puppeteer’s highly effective browser-capabilities make it an ideal candidate for internet app testing and internet scraping.

To call just a few use circumstances the place Puppeteer offers the right functionalities for internet builders,

  • Generate PDFs and screenshots of internet pages
  • Automate type submission
  • Scrape internet pages
  • Carry out automated UI exams whereas preserving the take a look at setting up-to-date.
  • Producing pre-rendered content material for Single Web page Purposes (SPAs)

Arrange the challenge setting

You should utilize Puppeteer on the backend and frontend to generate PDFs. On this tutorial, we’re utilizing a Node backend for the duty.

Initialize NPM and arrange the standard Categorical server to get began with the tutorial.

Make sure that to put in the Puppeteer NPM bundle with the next command earlier than you begin.

Convert internet pages to PDF

Now we get to the thrilling a part of the tutorial. With Puppeteer, we solely want just a few traces of code to transform internet pages into PDF.

First, create a browser occasion utilizing Puppeteer’s launch operate.

Then, we create a brand new web page occasion and go to the given web page URL utilizing Puppeteer.

Now we have set the waitUntil choice to networkidle0. After we use networkidle0 possibility, Puppeteer waits till there aren’t any new community connections throughout the final 500 ms. It’s a method to decide whether or not the positioning has completed loading. It’s not precise, and Puppeteer provides different choices, however it is without doubt one of the most dependable for many circumstances.

Lastly, we create the PDF from the crawled web page content material and put it aside to our system.

The print to PDF operate is kind of difficult and permits for lots of customization, which is incredible. Listed below are a number of the choices we used:

  • printBackground: When this selection is about to true, Puppeteer prints any background colours or photographs you might have used on the internet web page to the PDF.
  • path: Path specifies the place to avoid wasting the generated PDF file. You too can retailer it right into a reminiscence stream to keep away from writing to disk.
  • format: You’ll be able to set the PDF format to one of many given choices: Letter, A4, A3, A2, and many others.
  • margin: You’ll be able to specify a margin for the generated PDF with this selection.

When the PDF creation is over, shut the browser reference to browser.shut().

Construct an API to generate and reply PDFs from URLs

With the data we collect up to now, we will now create a brand new endpoint that may obtain a URL as a question string, after which it is going to stream again to the shopper the generated PDF.

Right here is the code:

In the event you begin the server and go to the /pdf route, with a goal question param containing the URL we wish to convert. The server will serve the generated PDF immediately with out ever storing it on disk.

URL instance: http://localhost:3000/pdf?goal=https://google.com

Which is able to generate the next PDF because it appears to be like on the picture: