HTML-PDF example using Mustache.js

Abhishek Kumar
Sep 8, 2018 · 4 min read

Ever wonder if we can have multiple copies of a thing with a little change in every copy. Not a common use but sometimes without this, things can get messy. Say, you want a photo frame with same design but different photograph and name for the person of the photograph.

Why i am pinching this topic here ??
because i had to generate an invoice for a sale order, but the invoice would be different for every order but with same design across all invoices.

So, i created a template for my invoice (invoice-template) and generated multiple invoices by providing different content data to each template.

This is achieved using following libraries -

  • Mustache.jsa templating engine to generate html string from a given template and a data object. Mustache is a logic-less template syntax. It can be used for HTML, config files, source code- anything. It works by expanding tags in a template using values provided in a hash or object.
  • Html-pdfa node library to generate pdf from html string. It spawns a phantom-js process and passes the pdf as buffer or as filename.

Necessary files —

  • package.json
  • server.js
  • template file with data array

Step 1 : Create a simple node project

Create a simple node project using npm init command and follow the instructions. After successful creation, package.json is created.

Project’s package.json file

Step 2 : Create a javascript file — server.js

Create an index file which is going to be a server and will handle every request, say it’s server.js. Create a new file server.js and add the required code to create a simpe server.

Do something like this to create a server

Add proper dependencies to the file.

Along with dependencies, a template file is also included which contains a template and data array in itself

Step 3 : create a javascipt file which contains an object with template and template data.

Now the final step is to have a template file which will be rendered as html after data is provided into the template. This template will understand mustache.js syntax and data is provided accordingly.

template variable in the file contains a string with html content but variables inside curly brackets, the identification for mustache.js to know the variables to replace. Say, here mustache will look for organisation object from the data object provided, and it will fetch the logo and phone property to fill the {{organisation.logo}} and {{organisation.phone}}
templateDataObject contains the data values that will replace the variables from the template by mustache templating engine.

Finally, above mentioned two objects are returned from this sale Invoice template file to be used in server.js

salesInvoive.js — the file included in the server.js

So, after creating the template file we have to handle a request which will generate the required html content and will be send in response, and the browser requesting the server will be receive the pdf content in response and can show the generated pdf in the window.

Server.js method to handle pdf code.

server file method responsible for generating the desired result.

Run your server.js file using node command, node server.js

Say, if your server is running at port 3232, and the above method is called if you request is for ‘/sale’ url then the pdf returned from the server to browser is opened as the following output -

Pdf displayed into the browser.

This covers the html-pdf library example working with mustache.js

Please look for necessary links :

There will be many instances where you will need to have pdf generation requirement in the project, key is how you are going to generate pdf content and where. And by where, i mean server side or client side.

PS: Many libraries are available for pdf-generation- you just have to figure out your requirement.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade