PDF Files Creation & via Free JavaScript API

Getting Started with PDFMake

PDFMake is available at npm, You can easily download it and install it on your machine. Please use the following command for smooth installation.

bower install pdfmake

Generate PDF Files using JavaScript Library

The Open source JavaScript library PDFMake makes it easy for software programmers to generate PDF documents inside their own applications using JavaScript code. The library has given a complete set of features for working with PDF files, such as choosing font types with size, color, and formatting, adding a new page, inserting columns, adding and applying styles, inserting tables, deleting unwanted pages, and many more.

Add Headers & Footers to PDF File

Headers and footers are very useful parts of PDF documents and can be used to include that part of the content that users want to appear on every page of a document such as an author name, document title, page numbers, logo, and much more. The JavaScript library PDFMake has provided complete support for adding and modifying headers & footers to a PDF document. It supports features like adding repetitive header/footer, inserting images in a header/footer, adding page numbers, and much more.

 var docDefinition = {
 header: 'simple text',

 footer: {
  columns: [
   'Left part',
   { text: 'Right part', alignment: 'right' }
  ]
 },

 content: (...)
};

Inserting Images to PDF Files

The Open source JavaScript library PDFMake has provided complete support for adding as well as modifying images inside PDF files using JavaScript commands. The library has provided features for setting image width and height, fitting an image inside a rectangle, calling an image via URLs, scaling the image proportionally, and image stretching. If you want to use the same image in multiple nodes, you need to put it in the image dictionary and just call it by its name.

 var docDefinition = {
 content: [
  {
   // you'll most often use dataURI images on the browser side
   // if no width/height/fit is provided, the original size will be used
   image: 'data:image/jpeg;base64,...encodedContent...'
  },
  {
   // if you specify width, image will scale proportionally
   image: 'data:image/jpeg;base64,...encodedContent...',
   width: 150
  },
  {
   // if you specify both width and height - image will be stretched
   image: 'data:image/jpeg;base64,...encodedContent...',
   width: 150,
   height: 150
  },
  {
   // you can also fit the image inside a rectangle
   image: 'data:image/jpeg;base64,...encodedContent...',
   fit: [100, 100]
  },
  {
   // if you reuse the same image in multiple nodes,
   // you should put it to to images dictionary and reference it by name
   image: 'mySuperImage'
  },
  {
   image: 'myImageDictionary/image1.jpg'
  },
  {
   // in browser is supported loading images via url from reference by name in images
   image: 'snow'
  },
  {
   image: 'strawberries'
  },
 ],

 images: {
  mySuperImage: 'data:image/jpeg;base64,...content...',
  snow: 'https://picsum.photos/seed/picsum/200/300',

  strawberries: {
   url: 'https://picsum.photos/id/1080/367/267'
   headers: {
    myheader: '123',
    myotherheader: 'abc',
   }
  }
 }
};

Page Orientation and Margin Support

The free JavaScript library PDFMake has included support for setting page size, page orientation as well as page margins inside JavaScript apps. To set the page size you need to provide the width and height of the new page. By default, the library uses portrait page orientation but can easily set it to landscape with one-liner code. It also provides support for setting page margins and allows users to dynamically control page breaks. It supports left, top, right, bottom as well as horizontal, and vertical margins.

 
var dd = {
	content: [
		{
			stack: [
				'This header has both top and bottom margins defined',
				{text: 'This is a subheader', style: 'subheader'},
			],
			style: 'header'
		},
		{
			text: [
				'Margins have slightly different behavior than other layout properties. They are not inherited, unlike anything else. They\'re applied only to those nodes which explicitly ',
				'set margin or style property.\n',
			]
		},
		{
			text: 'This paragraph (consisting of a single line) directly sets top and bottom margin to 20',
			margin: [0, 20],
		},
		{
			stack: [
				{text: [
						'This line begins a stack of paragraphs. The whole stack uses a ',
						{text: 'superMargin', italics: true},
						' style (with margin and fontSize properties).',
					]
				},
				{text: ['When you look at the', {text: ' document definition', italics: true}, ', you will notice that fontSize is inherited by all paragraphs inside the stack.']},
				'Margin however is only applied once (to the whole stack).'
			],
			style: 'superMargin'
		},
		
	],
	styles: {
		header: {
			fontSize: 18,
			bold: true,
			alignment: 'right',
			margin: [0, 190, 0, 80]
		},
		subheader: {
			fontSize: 14
		},
		superMargin: {
			margin: [20, 0, 40, 0],
			fontSize: 15
		}
	}
	
}

Insert Tables to PDF via JavaScript

The open source library PDFMake enables computer programmers to insert and update tables inside PDF files. The library supports various advanced features for handling table’s rows columns and cells. It has include support for table alignment, style table borders, defining widths in percent, rotate tables, define Table Header row on new page and many more.

 var docDefinition = {
 content: [
  {
   layout: 'lightHorizontalLines', // optional
   table: {
    // headers are automatically repeated if the table spans over multiple pages
    // you can declare how many rows should be treated as headers
    headerRows: 1,
    widths: [ '*', 'auto', 100, '*' ],

    body: [
     [ 'First', 'Second', 'Third', 'The last one' ],
     [ 'Value 1', 'Value 2', 'Value 3', 'Value 4' ],
     [ { text: 'Bold value', bold: true }, 'Val 2', 'Val 3', 'Val 4' ]
    ]
   }
  }
 ]
};

pdfMake.createPdf(docDefinition, tableLayouts, fonts, vfs)

// tableLayouts, fonts and vfs are all optional - falsy values will cause