PDFMake: Getting started with PDF printing in pure javascript

hey, have you been generated and printed a pdf file in javascript? I found some libraries which support both client and server side. I tried to use and test to get a library that is suitable for me, I mean my project's requirement, and finally, I chosed pdfmake.

1. what is pdfmake outstanding?

Print PDFs directly in the browser or delegate it to your NodeJS backend. Use the same document definition in both cases.

Forget about manual x, y calculations. Declare document structure and let pdfmake do the rest.

The majority of libraries are using x, y definitions to render and print them on, which is good but will be hard if we need a pdf file with dynamic data. Just declare document structure like:

// render paragraphs
{
  content: [
        {
            text: 'Quisque velit nisi, pretium ut lacinia in, elementum.'
        },
  ],
  styles: {
    subheader: {
        fontSize: 14
    }
  }
}

Use paragraphs, columns, lists, tables, canvas, etc... Declare your own styles, use custom fonts, build a DSL and extend the framework.

Pdfmake will print based on objects which you declared in content: []. These objects can be paragraphs(text), tables(table), lists(ol, ul), image(image) etc.

1. Getting started

pdfmake is not supported for typescript, It will be hard to know what is exactly properties, but I have found out them at pdf source code, and there are some object's properties

interface IParapraph {
    alignment: string; // left, center, right
    fontSize: number;
    fontFeatures: string;
    characterSpacing: number;
    color: string;
    decoration: string;
    decorationColor: string;
    decorationStyle: string;
    background: string;
    link: string;
    linkToPage: string;
    nowrap: boolean;
    sub: boolean;
    sup: boolean;
}
interface ITable {
  hLineWidth: (index: number, node: INode) => number;
  vLineWidth: (index: number, node: INode) => number;
  hLineColor: (index: number, node: INode) => string;
  vLineColor: (index: number, node: INode) => string;
  hLineStyle: (index: number, node: INode) => string;
  vLineStyle: (index: number, node: INode) => string;
  paddingTop: (index: number, node: INode) => number;
  paddingLeft: (index: number, node: INode) => number;
  paddingRight: (index: number, node: INode) => number;
  paddingBottom: (index: number, node: INode) => number;
  fillColor: (index: number, node: INode) => string;
  fillOpacity: (index: number, node: INode) => number;
  defaultBorder: (index: number, node: INode) => boolean;
  body: Node[];
}

1. Setup

// Using yarn
yarn add pdfmake
// Using npm
npm i pdfmake

Copy and paste this example:

import pdfmake from 'pdfmake';
const docDefinition = {
        pageSize: 'A4',
        // by default we use portrait, you can change it to landscape if you wish
        // pageOrientation: 'landscape',

        // [left, top, right, bottom] or [horizontal, vertical] or just a number for equal margins
        pageMargins: [ 0, 20, 8, 30],
        defaultStyle: {
          fontSize: 10
        },
        footer: (currentPage, pageCount) => {
          return {
            text: `Page ${currentPage}/${pageCount}`,
            alignment: 'right',
            margin: [0, 8, 8, 0],
            fontSize: 6
          };
        },
        content: [
             {text: 'Tables', style: 'header'},
            'Official documentation is in progress, this document is just a glimpse of what is possible with pdfmake and its layout engine.',
            {text: 'A simple table (no headers, no width specified, no spans, no styling)', style: 'subheader'},
            'The following table has nothing more than a body array',
            {
               style: 'tableExample',
               table: {
                  body: [
                        ['Column 1', 'Column 2', 'Column 3'],
                        ['One value goes here', 'Another one here', 'OK?']
                 ]
              }
            }
        ]
}
const pdf = pdfmake.createPdf(docDefinition),
    filename = 'example.pdf';
pdf.download(filename, () => {
    // callback
});

1. Conclusion

Pdfmake is supported for UTF-8, which is so helpful for me. Pdfmake is auto pagination, that function needs me to have to manually calculated in other library also. Home page: http://pdfmake.org Github: https://github.com/bpampuch/pdfmake

Need more information or any ideas, feedback, please leave with a comment. Thank you!