Node.js Angular 9 Tutorial to Export PDF Documents Using PDFMake.js Library Using ng-pdf-make Directive Using Javascript Full Project For Beginners

 

 

npm i ng-pdf-make

 

 

 

This is library creates a bridge to use pdfmake library with your angular 2 implementation.

 

pdfmake is fully customizable, so for now the options ready to use are:

  • Simple text insertion.
  • Some Styles for text.
  • Basic Columns.
  • Basic Tables with custom column width.
  • Ordered list with reverse and start properties.
  • Unordered list.
  • Images from url, with custom width and height properties.
  • Download function with custom file name.
  • Open function.
  • Print function.
  • Page properties (Size and orientation).
  • Inline text styles using css format.
  • Columns widths and styles using css style format.

 

 

 

SETUP

 

 

First of all you need to include this pdfmake library inside your application module like this

 

 

import { PdfmakeModule } from 'ng-pdf-make';
 
    @NgModule({
      imports: [
        PdfmakeModule
      ],
      declarations: [
        AppComponent
      ],
      providers: [],
      bootstrap: [AppComponent]
 
      export class AppModule {}
})

 

 

Usage

 

 

import { Component, OnInit } from '@angular/core';
import { PdfmakeService } from 'ng-pdf-make/pdfmake/pdfmake.service';
 
@Component({
  selector: 'ng-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
 
  // Inject pdfmake service
  constructor(public pdfmake: PdfmakeService) { }
 
  ngOnInit() {
 
    // Create a pdf document
    // IMPORTANT: if a document was created before, this method will destroy it and
    // create a new instance.
    this.pdfmake.create();
 
    // Configure text styles  
    this.pdfmake.configureStyles({ header: { fontSize: 18, bold: true } });
 
    // Add a text with style
    this.pdfmake.addText('This is a header, using header style', 'header');
 
    // Add a text with custom style
    this.pdfmake.addText('This is a header, using a custom style', { fontSize: 16, bold: true });
 
    // Add simple text
    this.pdfmake.addText('This is an sample PDF printed with pdfMake');
 
    // Add large text
    this.pdfmake.addText('Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines');
 
    // Array with colums
    const columns = [
        'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Malit profecta versatur nomine ocurreret multavit, officiis viveremus aeternum superstitio suspicor alia nostram, quando nostros congressus susceperant concederetur leguntur iam, vigiliae democritea tantopere causae, atilii plerumque ipsas potitur pertineant multis rem quaeri pro, legendum didicisse credere ex maluisset per videtis. Cur discordans praetereat aliae ruinae dirigentur orestem eodem, praetermittenda divinum. Collegisti, deteriora malint loquuntur officii cotidie finitas referri doleamus ambigua acute. Adhaesiones ratione beate arbitraretur detractis perdiscere, constituant hostis polyaeno. Diu concederetur.',
        'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Malit profecta versatur nomine ocurreret multavit, officiis viveremus aeternum superstitio suspicor alia nostram, quando nostros congressus susceperant concederetur leguntur iam, vigiliae democritea tantopere causae, atilii plerumque ipsas potitur pertineant multis rem quaeri pro, legendum didicisse credere ex maluisset per videtis. Cur discordans praetereat aliae ruinae dirigentur orestem eodem, praetermittenda divinum. Collegisti, deteriora malint loquuntur officii cotidie finitas referri doleamus ambigua acute. Adhaesiones ratione beate arbitraretur detractis perdiscere, constituant hostis polyaeno. Diu concederetur.',
    ];
 
    // Add columns
    this.pdfmake.addColumns(columns);
 
    // List to add
    const list1 = ['item 1', 'item 2', 'item 3'];
    const list2 = ['item 1', 'item 2', 'item 3'];
    const list3 = ['item 1', 'item 2', 'item 3'];
    const list4 = ['item 1', 'item 2', 'item 3'];
 
    // Adding unordered list
    this.pdfmake.addUnorderedlist(list1);
 
    // Adding ordered list
    this.pdfmake.addOrderedList(list2);
 
    // Adding reversed oredered list
    this.pdfmake.addOrderedList(list3, true);
 
    // Adding ordered list starting at 50
    this.pdfmake.addOrderedList(list4, false, 50);
 
    // Add image from url
    this.pdfmake.addImage('http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png');
 
    // Add image from url using custom width and height.
    this.pdfmake.addImage('http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png', 300, 150);
 
    // Add image from localhost and using width
    this.pdfmake.addImage('http://localhost:4200/assets/daniel.jpg', 200);
 
    // Destroy pdf instance
    // You can destroy intencionally the pdf instance
    // this.pdfmake.destroy();
  }
}

 

 

Tables

 

 

import { Component, OnInit } from '@angular/core';
import { PdfmakeService } from 'ng-pdf-make/pdfmake/pdfmake.service';
import { Cell, Row, Table } from 'ng-pdf-make/objects/table';
 
@Component({
  selector: 'ng-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
 
  constructor(private pdfmake: PdfmakeService) { }
 
  ngOnInit() {
 
    // Create Headers cells
    const header1 = new Cell('Header1');
    const header2 = new Cell('Header2');
    const header3 = new Cell('Header3', { fillColor: '#cecece' });
 
    // Create headers row
    const headerRows = new Row([header1, header2, header3]);
 
    // Create a content row
    const row1 = new Row([new Cell('One value goes here '), new Cell('Another one here'), new Cell('OK?')]);
 
    // Custom  column widths
    const widths = [100, '*', 200, '*'];
 
    // Create table object
    const table = new Table(headerRows, [row1], widths);
 
    // Add table to document
    this.pdfmake.addTable(table);
  }
}

 

 

 

Buttons to Print ,Open and Download PDF Document

 

 

 

<button (click)="pdfmake.open()">Open PDF</button>
<button (click)="pdfmake.print()">Print PDF</button>
<button (click)="pdfmake.download()">Download PDF</button>

 

 

openPdf(){
        this.pdfmake.open();
    }
 
    printPdf(){
        this.pdfmake.print();
    }
 
    downloadPDF(){
        this.pdfmake.download();
    }
 
    downloadPdfWithName(customName: string){
        this.pdfmake.download(customName);
    }

 

 

Official Github Repository

 

 

Leave a Reply