Skip to content

How to convert HTML to PDF using puppeteer

    The Idea is to use headless chrome in-built pdf print from rendered dom and save it as PDF file.

    Sounds interesting and straight forward right, with puppeteer its almost simple.

    Puppeteer is nodejs library, provides high-level api to control headless chrome.

    So steps are as below

    Install puppeteer

    npm install puppeteer

    Include it in your script

    const fs = require('fs')
    const path = require('path')
    const utils = require('util')
    const puppeteer = require('puppeteer')
    const readFile = utils.promisify(fs.readFile)

    We also need fs, path and util to read html file locally, this blog focus more on converting local html file into pdf, we can also do the same with url, refer to note at the end of the blog to convert pdf from url.

    Read and Load HTML file

    async function getHtmlFile() {
        console.log("Loading template file in memory")
        try {
            const htmlFile= path.resolve("./test.html");
            return await readFile(htmlFile, 'utf8');
        } catch (err) {
            return Promise.reject("Could not load html file");

    Let’s generate PDF using puppeteer

            .then(async (res) => {
                const html = res;
                const browser = await puppeteer.launch(); //launch browser
                const page = await browser.newPage() // create new page
                await page.setContent(html) // load html content in new page
                await page.pdf({ 
                 path: 'testpdf.pdf', 
                 format: 'A4', 
                 displayHeaderFooter: true,
                 headerTemplate: "<div style=\"text-align: center;width: 297mm;font-size:  8px;\">Some Header Title</div>",
                 footerTemplate: "<div style=\"text-align: center;width: 297mm;font-size: 8px;\"><span style=\"margin-right: 1cm\"><span class=\"pageNumber\"></span> of <span class=\"totalPages\"></span></span></div>"
     }) //generate pdf using in-build chrome pdf functionality
                await browser.close(); //don't forgot to close browser after task is done
                console.log("PDF Generated")
            .catch(err => {

    refer to to know more about options available

    Above set of options give a good view of my test html and i allowed background graphics to show tables and images in html and used custom header and footer html to get page numbers also. Ofcourse you cannot do them in your chrome UI. That why i love api and sdks, they give you freedom.

    What we can do from here?

    Build a scalable html to pdf app on large scale.

    Use it in offline conversions in your products.

    Build a screenshot from url app.

    Ideas are endless. Let me know what idea you get in your mind.