Node.JS Puppeteer PDF Generation With Dynamic Data Using HTML5 & CSS3 Template in Handlebars in Command Line

Node.js Puppeteer PDF Generation With Dynamic Data Using HTML5 & CSS3 Template in Handlebars in Command Line

const puppeteer = require("puppeteer");
 
const fs = require("fs");
    
(async function () {
 
    try {
 
        const browser = await puppeteer.launch()
 
        const page = await browser.newPage()
 
        await page.setContent('<h1>Hello World</h1>')
 
        await page.pdf({
            path: 'output.pdf',
            format: 'A4',
            printBackground: true
        })
 
        console.log("done creating pdf")
 
        await browser.close()
 
        process.exit()
        
    } catch (e) {
        console.log(e)
    }
 
})();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Puppeteer PDF Generation Using Handlebars Template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1 class="text-center">
            PDF Generation
        </h1>
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Country</th>
                </tr>
            </thead>
            <tbody>
                {{#each users as | user |}}
                    <tr>
                        <td>{{user.name}}</td>
                        <td>{{user.age}}</td>
                        <td>{{user.country}}</td>
                    </tr>
                {{/each}}
            </tbody>
        </table>
    </div>
</body>
</html>

{
  "users": [
    {
      "name": "KANE WILLIAMSON",
      "age": 32,
      "country": "NEW ZEALAND"
    },
    {
      "name": "ROSS TAYLOR",
      "age": 38,
      "country": "NEW ZEALAND"
    },
    {
      "name": "TOM LATHAM",
      "age": 31,
      "country": "NEW ZEALAND"
    },
    {
      "name": "TIM SOUTHEE",
      "age": 33,
      "country": "NEW ZEALAND"
    }
  ]
}

const puppeteer = require("puppeteer");
 
const fs = require("fs-extra");
 
const hbs = require("handlebars");
 
const path = require("path");
 
const data = require('./data.json');
 
const compile = async function (templateName, data) {
    const filePath = path.join(process.cwd(), 'templates', `${templateName}.hbs`);
    const html = await fs.readFile(filePath, 'utf8');
    console.log(html)
    return hbs.compile(html)(data);
};
 
(async function () {
 
    try {
 
        const browser = await puppeteer.launch();
 
        const page = await browser.newPage();
 
        console.log(data)
 
        const content = await compile('index', data);
 
        console.log(content)
 
        await page.setContent(content);
 
        await page.pdf({
            path: 'output.pdf',
            format: 'A4',
            printBackground: true
        })
 
        console.log("done creating pdf");
 
        await browser.close();
 
        process.exit();
        
    } catch (e) {
        console.log(e);
    }
 
})();

Share on:

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Diksha. Here, I post about programming to help developers.

Leave a Comment