Create PDF from URL or Webpage in Node JS

11 mins0
Create PDF from URL or Webpage in Node JS - Codewolfy

If you’ve ever wished to make PDF from URL in Node JS, you’re not the only one. Companies frequently require exporting reports, invoices, or even web page snapshots to downloadable PDF files. Suppose you have an analytics dashboard or a news aggregator and want to enable users to export webpage as PDF with a single click. That’s where Node JS can help. It’s quick, light, and full of tools that simplify this process more than ever.

In this guide, you’ll learn how to generate PDF from webpage content using Node JS and explore different approaches with libraries like Puppeteer, jsPDF, Playwright, and html-pdf.

Setting Up Your Node JS Application

Let’s start by creating a new Node JS project. You’ll use Express to handle routes and a few helpful packages to generate PDFs from webpages.

Run the following commands in your terminal:

mkdir webpage-to-pdf
cd webpage-to-pdf
npm init -y
npm install express puppeteer jspdf playwright html-pdf

Here, we have created new Node.js application with express. Also added few libraries for PDF generation from URL. After installation, create a file named server.js and set up a basic Express app:

const express = require('express')
const app = express()
const port = 3000
app.use(express.urlencoded({ extended: true }))
app.use(express.static('public'))
app.listen(port, () => console.log(`Server running on http://localhost:${port}`))

Now your app is ready to handle routes and interact with different libraries to create PDFs from webpage link.

Basic Front-end setup for Export Webpage As PDF

Next, we will build a simple front-end form that allows users to enter any webpage URL. When they submit it to the back-end, we will process that URL and download PDF file automatically.

Create a folder named public and inside it a file named index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Create PDF from URL in Node JS</title>
</head>
<body>
  <h2>Generate PDF from Webpage</h2>
  <form action="/generate" method="POST">
    <input type="text" name="url" placeholder="Enter webpage URL" required>
    <button type="submit">Download PDF</button>
  </form>
</body>
</html>

It’s a basic HTML form with single input for URL and when user submit this form, our backend will generate PDF file for this URL using different approaches.

Using Puppeteer to Create PDF from Webpage

Puppeteer is one of the most powerful libraries for this job. It controls a headless Chrome browser and can easily generate PDF from any webpage with it’s content with just few lines of code.

Let’s add code to manage backend for our form into server.js file.

const puppeteer = require('puppeteer')
app.post('/generate', async (req, res) => {
  const { url } = req.body
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto(url, { waitUntil: 'networkidle0' })
  const pdf = await page.pdf({ format: 'A4' })
  await browser.close()
  res.setHeader('Content-Disposition', 'attachment; filename=webpage.pdf')
  res.setHeader('Content-Type', 'application/pdf')
  res.send(pdf)
})

When you visit your localhost and enter any URL. The puppeteer will basically load webpage content using driver and get it’s content to generate PDF document. Here, we have added code to generate PDF file and automatically starts download.

Below is sample file screenshot for codewolfy website home page.

Codewolfy Export webpage as PDF document in Node.js

Generate PDF from URL with jsPDF in Node.js

jsPDF is a lightweight option mainly used for browser-based PDF generation. However, it can also be integrated into Node environments for smaller use cases. it’s primarily focused on working with Javascript. Let’s try to achieve same output using jsPDF.

const { jsPDF } = require('jspdf')
const axios = require('axios')
const { JSDOM } = require('jsdom')

app.post('/generate-jspdf', async (req, res) => {
  const { url } = req.body
  const response = await axios.get(url)
  const dom = new JSDOM(response.data)
  const doc = new jsPDF()
  doc.text(dom.window.document.title, 10, 10)
  const pdf = doc.output('arraybuffer')
  res.setHeader('Content-Disposition', 'attachment; filename=webpage.pdf')
  res.setHeader('Content-Type', 'application/pdf')
  res.send(Buffer.from(pdf))
})

Here, we have created another endpoint for jsPDF which works same as previous example but it uses jsPDF to create PDF file from given URL in Node.js. For implement this you need to change endpoint in HTML file.

Creating PDF from webpage with Playwright in Node.js

Playwright, similar to Puppeteer, offers cross-browser automation and works great for URL to PDF conversion.

const playwright = require('playwright')
app.post('/generate-playwright', async (req, res) => {
  const { url } = req.body
  const browser = await playwright.chromium.launch()
  const page = await browser.newPage()
  await page.goto(url, { waitUntil: 'networkidle' })
  const pdf = await page.pdf()
  await browser.close()
  res.setHeader('Content-Disposition', 'attachment; filename=webpage.pdf')
  res.setHeader('Content-Type', 'application/pdf')
  res.send(pdf)
})

This approach provides high-quality PDFs and better rendering for dynamic web pages. It’s works same as puppeteer but provide quality output in some cases.

Convert Webpage to PDF using html-pdf

html-pdf is a straightforward solution when you already have raw HTML and need to convert it directly into a PDF file. It’s a lightweight library with main focus on HTML conversion. For making this work with our example approach, we have to get HTML content from URL without using browser drivers.

Let’s take an example to understand this approach:

const pdf = require('html-pdf')
const axios = require('axios')

app.post('/generate-htmlpdf', async (req, res) => {
  const { url } = req.body
  const response = await axios.get(url)
  pdf.create(response.data).toBuffer((err, buffer) => {
    res.setHeader('Content-Disposition', 'attachment; filename=webpage.pdf')
    res.setHeader('Content-Type', 'application/pdf')
    res.send(buffer)
  })
})

As you can see, it perform axios request to get content from URL instead of loading it. Once it get content as HTML it will generate PDF file from It. It can work with vanilla JS too.

Conclusion

You now know how to create a PDF from any URL or webpage in Node JS through four different methods. Regardless of whether you use Puppeteer for complex rendering, jsPDF for fast exports, Playwright for browser compatibility, or html-pdf for ease, Node JS streamlines the process and allows for customization.

If your end-user aim is exporting webpage as PDF or automating URL to PDF conversion for your users, these methods can seamlessly integrate into your workflow. For more on PDF generation, see our guide “Create PDF Files in Node.JS” to easily build and export PDFs in Node.