TodayTools

Make PDFs with pdfmake flashcards

Build invoices, reports and certificates in JavaScript from a declarative document definition, in the browser or Node.

Donate
Beginner friendly, starts from zero
Section
How to study
0
Make PDFs with pdfmakeStart from zero · 1 of 12

What are a and pdfmake, in plain words?

A is a document file that looks the same on every phone, computer and printer. pdfmake is a free JavaScript tool that turns a short description of a document into a PDF.

A is digital paper; pdfmake is the printer that writes it for you.

All topics

Make PDFs with pdfmake at a glance

pdfmake is a free JavaScript tool that turns a short description of a document into a PDF file.

Like ordering from a tailor: you say what you want, and pdfmake does the measuring, cutting and fitting onto pages.

Words you will meet

PDF
A document file that looks the same on every device and printer
Object
A group of labelled values in curly brackets
Document definition
The object that describes your whole PDF
Content
The list of things that go on the pages
Node
One thing in the content, like a paragraph, a list or a table
Style
A named set of looks, like big and bold, that you reuse
Points
The unit pdfmake measures in: 72 points make one inch
Margin
The blank space around text or around the page edge

The steps

  1. 1. Start from zero (12 cards): What a PDF and pdfmake are, how pdfmake thinks, and the plain words the core basics use.
  2. 2. Core basics (14 cards): The document definition, your first PDF, text, lists, pages and spacing.
  3. 3. Next steps (16 cards): Styles, real invoice tables, columns, images, headers and footers, links and output as data.
  4. 4. Go deeper (16 cards): Fonts and scripts, Node and servers, page-break control, TOC, security, performance and choosing a library.
All 12 cards in Start from zero
What are a PDF and pdfmake, in plain words?
A PDF is a document file that looks the same on every phone, computer and printer. pdfmake is a free JavaScript tool that turns a short description of a document into a PDF.
How did people make PDFs from an app before tools like this?
They placed every line by hand at an exact spot on the page, worked out where long text should wrap, and broke tables across pages themselves. Slow and easy to get wrong.
Where do you meet PDFs made by apps in daily life?
Your electricity bill, a train ticket, a bank statement, an exam hall ticket or a course certificate you download. An app builds each one from data the moment you click.
What is a good everyday picture of how pdfmake works?
You tell a tailor what you want: colour, size, pockets. You do not cut the cloth yourself. With pdfmake you list what goes on the page, and it does the cutting and fitting.
What are a JavaScript object, a key and an array?
An object is a group of labelled values in { }. Each label is a key, like text, and it holds a value. An array is a list in [ ].
What is a document definition, and what are content and nodes?
The document definition is the object that describes the whole PDF. Its content is the list of things on the page, and each thing, here one paragraph, is called a node.
What are page size, margins and points?
Page size is the paper, like A4 or Letter. Margins are the blank border round the edge. Sizes are measured in points: 72 points make one inch.
What are a font and a style?
A font is the design of the letters, like Roboto. A style is a named set of looks, like big and bold, that you reuse by name instead of repeating it on every line.
What are npm, a package and Node?
A package is ready-made code someone shares. npm is the store you fetch packages from with one command. Node runs JavaScript outside the browser, so it can also make PDFs on a server.
What does "async" or a promise mean?
Some jobs finish later, like making a big PDF or fetching data. A promise is JavaScript's note saying "result coming", and await waits for it before the next line runs.
What do you need before starting?
Basic JavaScript (variables, objects and arrays), a browser and a text editor. To install with npm you also need Node on your computer.
What will you be able to do after this topic?
Make a PDF from data in the browser or on a server: styled text, lists, tables, page size and margins, then download, open or print it.
Make PDFs with pdfmake cheatsheet

Document definition

  • content: [ ... ] Everything on the pages
  • pageSize: 'A4' Or 'LETTER' or { width, height }
  • pageOrientation: 'landscape' Turn the page
  • pageMargins: [40, 60, 40, 60] Left, top, right, bottom in points
  • defaultStyle: { font: 'Roboto', fontSize: 10 } Base text style
  • styles: { h1: { fontSize: 18, bold: true } } Named styles
  • info: { title: 'Invoice INV-1042' } PDF metadata
  • watermark: { text: 'DRAFT', opacity: 0.08 } On every page

Nodes

  • { text: ['Pay ', { text: 'Rs 4,250', bold: true }] } Mixed inline styles
  • { ul: [...] } / { ol: [...] } Lists
  • { table: { headerRows: 1, widths, body } } Table
  • { columns: [{ width: '*' }, { width: 'auto' }] } Side by side
  • { stack: [...], unbreakable: true } Group, keep on one page
  • { image: 'logo', fit: [140, 50] } JPEG or PNG
  • { svg: '<svg ...>', width: 120 } Vector graphic
  • { qr: url, fit: 90 } QR code
  • { toc: { title: { text: 'Contents' } } } Table of contents

Layout control

  • margin: [0, 12, 0, 6] Space around a node
  • pageBreak: 'before' Start a new page
  • colSpan: 3, then {}, {} Merge cells with placeholders
  • dontBreakRows: true Keep rows whole
  • layout: 'lightHorizontalLines' Built-in table style
  • footer: (page, pages) => ({ text }) Page x of y
  • pageBreakBefore: (node, container) => bool Avoid orphan headings (0.3)

Output (0.3, promises)

  • pdfMake.addVirtualFileSystem(pdfFonts) Register bundled fonts
  • pdfMake.addFonts({ ... }) Register font families
  • createPdf(dd).download('inv.pdf') Save a file
  • createPdf(dd).open(win) Open in a tab made before async work
  • await createPdf(dd).getBlob() Blob for upload
  • await createPdf(dd).getBuffer() Buffer in Node
  • await createPdf(dd).write('out.pdf') Write a file in Node
Donate