Click Below to subscribe

How to Generate PDF in Node.js 2023

In this article, we gonna learn how to generate pdf in node.js. 

1. Let's create a new express project using express generator.

npm i -g express-generator
express node-pdf --view=hbs
cd node-pdf

2. Install puppeteer-html-pdf npm package.

npm i puppeteer-html-pdf

3. Create a folder controllers and inside this folder create pdf.controller.js


const hbs = require('hbs');
const PuppeteerHTMLPDF = require('puppeteer-html-pdf');

exports.print = async (req, res) => {
    const pdfData = {
        invoiceItems: [
            { item: 'Website Design', amount: 5000 },
            { item: 'Hosting (3 months)', amount: 2000 },
            { item: 'Domain (1 year)', amount: 1000 },
        invoiceData: {
            invoice_id: 123,
            transaction_id: 1234567,
            payment_method: 'Paypal',
            creation_date: '04-05-1993',
            total_amount: 141.5,
        baseUrl: `${req.protocol}://${req.get('host')}` // http://localhost:3000

    const htmlPDF = new PuppeteerHTMLPDF();
    htmlPDF.setOptions({ format: 'A4' }); 

    try {
        const html = await htmlPDF.readFile('views/invoice.hbs', 'utf8');  
        const template = hbs.compile(html);
        const content = template(pdfData);

        const pdfBuffer = await htmlPDF.create(content); 
    } catch (error) {
        res.send('Something went wrong.')


Note:- If want to store your exported file on the server you can use path option.

const options = {
	format: 'A4',
	path: 'storage/invoice.pdf' 

4. Create routes.


const express = require('express');
const router = express.Router();
const pdfController = require('../controllers/pdf.controller');

router.get('/', pdfController.print); 

module.exports = router;

5. Create a file views/invoice.hbs and add the following code.


    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Invoice Example</title>
    <link rel="stylesheet" href="{{baseUrl}}/stylesheets/style.css" />

    <div class="invoice-box">
        <table cellpadding="0" cellspacing="0">
            <tr class="top">
                <td colspan="2">
                            <td class="title">
                                <img src="{{baseUrl}}/images/logo.png" style="width: 100%; max-width: 88px" />
                                Invoice #:
                                {{invoiceData.invoice_id}}<br />
            <tr class="information">
                <td colspan="2">
                                Godaddy, LLC.<br />
                                12345 Sunny Road<br />
                                Sunnyville, CA 12345
                                Godaddy LLC.<br />
                                John Wick<br />
            <tr class="heading">
                <td>Payment Method</td>
                <td># Transaction Id</td>
            <tr class="details">
            <tr class="heading">
            {{#each invoiceItems}}
            <tr class="item {{#if @last}} last {{/if}}">
            <tr class="total">
                <td>Total: {{invoiceData.total_amount}}</td>


Note:- please checkout github repo -

6. Finally start the project.

npm start

Open http://localhost:3000 in the browser.

Leave Your Comment