Nocturnal Pumpkin Maelstrom

    ng-pdf-make
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.1 • Public • Published

    ng-pdf-make

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

    Notice:

    The update 0.1.0 is released to fix some of the issues reported and was updated to continue working with angular 2.x.
    The angular 4/6 support will be relased in the future, be pacient. 
    

    Install

    You can get it on npm:

    npm install ng-pdf-make --save

    Ready

    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.

    To do

    • Nested tables.
    • More customizable tables.
    • Nested Lists.
    • Margins.

    Setup

    You'll need to add PdfmakeModule to your application module.

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

    Usage

    Use the pdfmake service in your component:

     
    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();
      }
    }
     

    Use tables

    To use tables is necesary import some objects to create cells, rows an the table:

    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);
      }
    }
     

    Functions

    To use the open, download and print functions you can override the methods in the service or call it directly.

    in your view

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

    or

    in your controller

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

    Advance

    If you need to use some unimplemented function, you can send the tradicional dictionary document structure to the documentDefinition attribute in the service.

        pdfmake.documentDefinition = { ... }

    Credits

    Keywords

    none

    Install

    npm i ng-pdf-make

    DownloadsWeekly Downloads

    425

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    53.4 kB

    Total Files

    36

    Last publish

    Collaborators

    • bennyfranco