https://github.com/jmettraux/slipdf
Slim inspired template language on top of pdfmake (JS)
https://github.com/jmettraux/slipdf
javascript pdf pdfmake slim
Last synced: 5 months ago
JSON representation
Slim inspired template language on top of pdfmake (JS)
- Host: GitHub
- URL: https://github.com/jmettraux/slipdf
- Owner: jmettraux
- License: mit
- Created: 2017-11-21T09:20:07.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-07-20T00:50:14.000Z (almost 4 years ago)
- Last Synced: 2026-01-14T13:56:31.866Z (6 months ago)
- Topics: javascript, pdf, pdfmake, slim
- Language: JavaScript
- Size: 5.52 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# slipdf
A [Slim](http://slim-lang.com/) inspired templating system on top of [pdfmake](http://pdfmake.org/#/).
## An example
```slim
// example.slim
document pageSize='A4'
header
footer
content
p This is template #{template}
- users.forEach(function(user) {
p.name= user.name
- [ 'alpha', 'bravo' ].forEach(function(k) {
p.key= k
```
```html
```
```js
// preparation work, grab the example.slim via the Fetch API
var exampleSlim = null;
fetch('/slips/example.slim')
.then(function(res) { return res.text() })
.then(function(txt) { exampleSlim = txt; });
// ...
// later on, generation time
var exampleTemplate =
Slipdf.compile(exampleSlim);
var exampleDocument =
exampleTemplate({ users: [
{ name: 'Alice' },
{ name: 'Bob' } ] });
var examplePdf = pdfMake.createPdf(exampleDocument);
examplePdf.open();
// open the PDF immediately, in the browser
//examplePdf.getBuffer(function(exampleBuffer) { /* ... */ });
// grab the buffer and deal with it ...
examplePdf.getDataUrl(function(dataUrl) { /* ... */ });
// turn the PDF into a data URI and ...
```
### images
Images are to be added first to the Slipdf library itself, for example:
```js
Slipdf.addDataUrl('darts', '/images/gecbl/darts.png');
Slipdf.addDataUrl('shield', '/images/shield.jpg');
Slipdf.addDataUrl('office', 'https://images.example.org/office.png');
```
Slipdf then fetches the images and turns them into dataURLs. Those URLs can then be referenced in the Slim document as in:
```slim
p
| This is our new office:
img src=(dataUrls.office)
```
Although mimicking the img HTML tag, the slip img tag accepts the PdfMake attributes (width, height, fit, ...) see under "Images" in the [PdfMake documentation](http://pdfmake.org/#/gettingstarted).
Using `img src=(dataUrls.office)` is fine, but if the `img` is wrapped in a loop, the dataURL gets copied N times and the size of the resulting PDF grows. It is better to use the `images` "registration" tag above in the slip document and then to reference the image in the `img` src, as in:
```slim
document(
pageSize='A4'
pageOrientation='landscape'
pageMargins=[ 14, 21, 14, 7 * 14 ]
defaultStyle={ font: 'HelveticaNeue' }
)
colours
blue= '#002567'
white= '#ffffff'
images
foggy= dataUrls.foggy
star= dataUrls.star
styles
entry= { color: colours.white, fillColor: colours.blue, fontSize: 21 }
background
div
img src="foggy" width=(1260)
content
- entries.forEach(function(e, i) {
p.entry
| * #{e.name}
- if e.starry
img src="star"
```
Even if there are hundreds of starry entries, the weight of the star image (as a dataURL) is only counted once in the resulting PDF.
### tables
Warning about tables and `colspan` and `rowspan`: pdfmake requires us to have the overridden `td` cells.
Bad (will fail badly):
```slim
table
tr
td colspan=2 A
td B
tr
td a
td b
td c
```
Good:
```slim
table
tr
td colspan=2 A
td (will get overriden)
td B
tr
td a
td b
td c
```
It doesn't matter with colspan at the right of the table:
```slim
table
tr
td colspan=3 A
/ no need for a ghost td
/ no need for a ghost td
tr
td a
td b
td c
```
## License
MIT, see [LICENSE.txt](LICENSE.txt)