This NPM package takes care of filling the HTML template (handlebars), letting you use the HTML preview, and of course, generating a PDF.
I've written this package due to my need for generating a custom template invoices.
Node
npm i @solcode/invoice-creator-api-packageYarn
yarn add @solcode/invoice-creator-api-packageThis NPM package represents a generator class that consists of 2 main functions.
| Action | Function | Parameters |
|---|---|---|
| Constructor | new Generator() | template, data |
| Fill template with data | renderTemplate() | |
| Download PDF client-side | downloadPDF() | generateRenderedPdf = true |
Template is a handlebars (or vanilla HTML5) string, but since the PDF generation is limited in some ways, there are a few additional requirements for the HTML, such as:
- src attribute of img tags needs to have base64 encoded data instead of URLs (otherwise, images won't load in PDFs)
- same rule applies for SVGs, they need to be inline
You can use https://www.base64-image.de for converting images to base64 data.
Data is nothing more than a simple JSON object that matches handlebars variables inside of the template. Eg.:
{{ total }} // handlebar variable inside of HTML
// and this would be the JSON
const data = {
total: 200
}Take a look at this simple example down there.
import Generator from '@solcode/invoice-creator-api-package'
const template = '<p>this is my {{ title }}</p>'
const data = {
title: 'test'
}
const generatorObject = new Generator(template, data) // returns Generator object
generatorObject.renderTemplate() // renders the template and save it to generator's property renderedTemplate
// if we wanna see preview of html we can get it by
let previewHtml = generatorObject.renderedTemplate
console.log(previewHtml) // we can display it how we want then
generatorObject.downloadPDF() // generates and downloads PDFThis piece of code is open-source under MIT license.
- creating template variables standard
- class abstraction over data json object
If you feel that you have a great idea which could improve this piece of code, fork it, commit your changes and make a pull request, so we can take a look at it, thanks! 😎
Even that we have our clients, a little support would really help us to speed up free & open-source projects like this.
BTC Address (3KkrgnJfN8zCGTqWPfjRAKLeUSPD2z79aG)
