https://github.com/chuongtrh/html_to_pdf

Generate a simple invoice PDF from HTML using puppeteer & handlebars
https://github.com/chuongtrh/html_to_pdf

handlebars htmltopdf pdf puppeteer

Last synced: 2 months ago
JSON representation

Generate a simple invoice PDF from HTML using puppeteer & handlebars

• Host: GitHub
• URL: https://github.com/chuongtrh/html_to_pdf
• Owner: chuongtrh
• Created: 2018-10-03T08:29:56.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-04-18T02:35:14.000Z (over 1 year ago)
• Last Synced: 2024-10-01T00:20:58.360Z (2 months ago)
• Topics: handlebars, htmltopdf, pdf, puppeteer
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/@chuongtrh/html-to-pdf
• Size: 481 KB
• Stars: 114
• Watchers: 3
• Forks: 37
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-puppeteer - html_to_pdf - Generate a simple invoice PDF from HTML. (Examples)

README

        
## html_to_pdf

Generate a simple PDF invoice from HTML using [puppeteer](https://github.com/GoogleChrome/puppeteer) & [handlebars](http://handlebarsjs.com/)

![Invoice](https://raw.githubusercontent.com/chuongtrh/html_to_pdf/master/screenshot/invoice.png)

## Introduce

- [Puppeteer](https://github.com/GoogleChrome/puppeteer)

  > Puppeteer is Node.js library giving you access to a headless Chrome browser. This makes it a breeze to generate PDF files with Node.js

- [Handlebars](http://handlebarsjs.com/)

  > Handlebars provides the power necessary to let you build semantic templates effectively with no frustration

## How to use

- Run `npm install` to install package in package.json

- Run `node example.js` to generate invoice.pdf

## The PDF Invoice from HTML

1. Prepare content html (invoice.html)

2. Using handlebars to binding data to content html

3. Using Puppeteer to generate pdf from final html

index.js

```js

const puppeteer = require("puppeteer");

const handlebars = require("handlebars");

module.exports.html_to_pdf = async ({ templateHtml, dataBinding, options }) => {

  const template = handlebars.compile(templateHtml);

  const finalHtml = encodeURIComponent(template(dataBinding));

  const browser = await puppeteer.launch({

    args: ["--no-sandbox"],

    headless: true,

  });

  const page = await browser.newPage();

  await page.goto(`data:text/html;charset=UTF-8,${finalHtml}`, {

    waitUntil: "networkidle0",

  });

  await page.pdf(options);

  await browser.close();

};

```

example.js

```js

const fs = require("fs");

const path = require("path");

const { html_to_pdf } = require(".");

try {

  (async () => {

    const dataBinding = {

      items: [

        {

          name: "item 1",

          price: 100,

        },

        {

          name: "item 2",

          price: 200,

        },

        {

          name: "item 3",

          price: 300,

        },

      ],

      total: 600,

      isWatermark: true,

    };

    const templateHtml = fs.readFileSync(

      path.join(process.cwd(), "invoice.html"),

      "utf8"

    );

    const options = {

      format: "A4",

      headerTemplate: "
",

      footerTemplate: "
",

      displayHeaderFooter: false,

      margin: {

        top: "40px",

        bottom: "100px",

      },

      printBackground: true,

      path: "invoice.pdf",

    };


    await html_to_pdf({ templateHtml, dataBinding, options });

    console.log("Done: invoice.pdf is created!");

  })();

} catch (err) {

  console.log("ERROR:", err);

}

```

## How to display paid stamp watermark on invoice?

Using handlebars to check param `isWatermark`

```js

  {{#if isWatermark}}

    


        PAID 

    {{/if}}

```


Change `isWatermark: true` and run `node pdf.js` again

![Invoice with stamp paid watermark](https://raw.githubusercontent.com/chuongtrh/html_to_pdf/master/screenshot/invoice_paid.png)

## License

html_to_pdf is available under the MIT license. See the LICENSE file for more info.