Last active
November 28, 2018 09:37
-
-
Save MEGApixel23/e6f8793d5316387178528c795c43f34b to your computer and use it in GitHub Desktop.
The real example which was used in AWS Lambda backend. The use case was PFD generation from HTML template. In order to use something light and fast Mustache library was picked. Handlebars doc says that it is largely compatible with Mustache templates. So the same should work with Handlebars, though JS part needs to be changed a bit.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const mustache = require('mustache'); | |
| /** | |
| * @param html | |
| * @param data has the following structure: | |
| * { | |
| * pages: [ | |
| * { | |
| * packages: { | |
| * dspName: String, | |
| * number: Number, | |
| * countAll: Number, | |
| * logo: String, | |
| * externalOrderId: String, | |
| * dspOrderId: String, | |
| * customerName: String, | |
| * address: String, | |
| * phone: String, | |
| * deliveryDate: String, | |
| * deliveryTime: String, | |
| * deliveryInstructions: string, | |
| * } | |
| * } | |
| * ] | |
| * } | |
| * @param partials has pre-compiled CSS, JS and HTML parts (strings). Has the following structure: | |
| * { barCode: String, css: String, vendor: String } | |
| * | |
| * @return String | |
| */ | |
| module.exports = (html, data, partials) => { | |
| return mustache.render(html, data, partials); | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <style>{{> css }}</style> | |
| <script>{{> vendor }}</script> | |
| </head> | |
| <body> | |
| {{# pages }} | |
| <div class="page"> | |
| {{# packages }} | |
| <div class="package"> | |
| <div class="header-container"> | |
| <div class="header pull-left corporate-name">{{ dspName }}</div> | |
| <div class="header pull-right packages">{{ number }}/{{ countAll }}</div> | |
| </div> | |
| <div class="center"> | |
| {{# logo }} | |
| <img class="logo" src="{{{ logo }}}" /> | |
| {{/ logo }} | |
| </div> | |
| <div class="info center"> | |
| <table class="details"> | |
| <tr> | |
| <td class="heading">Order #:</td> | |
| <td>{{ externalOrderId }}</td> | |
| </tr> | |
| {{# dspOrderId }} | |
| <tr> | |
| <td class="heading">{{ dspName }} Order ID:</td> | |
| <td>{{ dspOrderId }}</td> | |
| </tr> | |
| {{/ dspOrderId }} | |
| <tr> | |
| <td class="heading">Name:</td> | |
| <td>{{ customerName }}</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">Address:</td> | |
| <td> | |
| {{# address }} | |
| <div>{{ item }}</div> | |
| {{/ address }} | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="heading">Phone #:</td> | |
| <td>{{ phone }}</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">Delivery Date:</td> | |
| <td>{{ deliveryDate }}</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">Delivery Time:</td> | |
| <td>{{ deliveryTime }}</td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <div class="instructions-icon"></div> | |
| </td> | |
| <td>{{ deliveryInstructions }}</td> | |
| </tr> | |
| </table> | |
| </div> | |
| </div> | |
| {{/ packages }} | |
| </div> | |
| {{/ pages }} | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment