Click Below to subscribe

How to Generate PDF in Node.js 2022

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 html-pdf npm package.

npm i html-pdf

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

controllers/pdf.controller.js

const fs = require('fs');
const readFile = require('util').promisify(fs.readFile);
const hbs = require('hbs');
const pdf = require('html-pdf'); 

exports.print = async (req, res) => {  
    const invoiceItems = [
        { 'item': 'Website Design', 'amount': 50.50 },
        { 'item': 'Hosting (3 months)', 'amount': 80.50 },
        { 'item': 'Domain (1 year)', 'amount': 10.50 }
    ]
    const invoiceData = {
        'invoice_id': 123,
        'transaction_id': 1234567,
        'payment_method': 'Paypal',
        'creation_date': 'M d, Y',
        'total_amount': 141.50
    }

    const content  = await readFile('views/invoice.hbs','utf8');  
    const template = hbs.compile(content);
    const html     = template({ invoiceItems, invoiceData });

    const options = {
        base: `${req.protocol}://${req.get('host')}`, // http://localhost:3000
        format: 'A4'
    }

    pdf.create(html, options).toBuffer((err, buffer) => { 
        if (err) return console.log(err);
        res.attachment('invoice.pdf')
        res.end(buffer);
    });
}

Ref:- https://www.npmjs.com/package/html-pdf

Note:- If want to store your exported file on the server you can use toFile() function.

pdf.create(html, options).toFile('storage/invoice.pdf', (err, fileData) => {  
    if (err) return console.log(err);
    res.send('Pdf generated.');
});

Note:- If you want to use layouts then you can also use render() function.

res.render('invoice', { invoiceItems, invoiceData }, (err, html) => {
     // html contains rendered template
})

4. Create routes.

routes/index.js

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.

<html>

<head>
    <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="/stylesheets/style.css" />
</head>

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

</html>

Note:- please checkout github repo - https://github.com/ultimateakash/node-pdf

6. Finally start the project.

npm start

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

Leave Your Comment