SkPdfMake

pdfmake wrapper for Angular7

Installation

$ npm install sk-pdf-make

Import

import {SkPdfMakeModule} from 'sk-pdf-make';
@NgModule({
  imports: [
    SkPdfMakeModule,
  ]
})
export class AppModule { }

SkPdfMakeModule has SkPdfMakeService added to its providers, so we can use it to generate PDF files.

Examples

Creating PDF file with one empty page

export class AppComponent implements OnInit {

  // inject the service
  constructor(private pdfMakeService: SkPdfMakeService) { }

  ngOnInit() {
    // create document definition
    const dd: DocumentDefinition = {
      content: []
    };
    // create pdf file from specified definition and download it
    this.pdfMakeService.createPdf(dd)
      .subscribe(pdf => pdf.download());
  }

}

Document definition must always have content property.

Below is document definition with some other top-level properties and their default values:

{
  content: [],
  pageSize: PageSize.A4,
  pageOrientation: PageOrientation.PORTRAIT,
  compress: true,
  header: null,
  footer: null
}

Adding paragraphs to the file

const dd: DocumentDefinition = {
  content: [
    {
      text: 'This paragraph is bold',
      bold: true
    },
    {
      text: 'This paragraph is italics',
      italics: true
    },
    {
      text: 'This paragraph is blue',
      color: 'blue',
      fontSize: 16
    },
  ]
}

Paragraph can be array of texts, and each of its items can be styled individually

const dd: DocumentDefinition = {
  content: [
    {
      text: [
        {
          text: 'This ',
          color: 'red'
        },
        {
          text: 'paragraph ',
          color: 'blue'
        },
        {
          text: 'is ',
          color: 'indigo'
        },
        {
          text: 'colorful.',
          color: '#009f00'
        }
      ]
    }
  ]
};

Rendering tables

const dd: DocumentDefinition = {
  content: [
    {
      table: {
        body: [
          ['column 1', 'column 2', 'column 3'],
          ['value 1', 'value 2', 'value 3'],
          ['value 4', 'value 5', 'value 6'],
          ['value 7', 'value 8', 'value 9']
        ]
      }
    }
  ]
};

Customizing table header:

const dd: DocumentDefinition = {
  content: [
    {
      table: {
        body: [
          [
            {text: 'column 1', style: 'tableHeader'},
            {text: 'column 2', style: 'tableHeader'},
            {text: 'column 3', style: 'tableHeader'},
          ],
          ['value 1', 'value 2', 'value 3'],
          ['value 4', 'value 5', 'value 6'],
          ['value 7', 'value 8', 'value 9']
        ]
      }
    }
  ],
  styles: {
    tableHeader: {
      fillColor: '#bcbcbc',
      bold: true
    }
  }
};

Adding header and footer

const dd: DocumentDefinition = {
  content: [],
  header: {
    text: 'Page header goes here',
    style: 'headerStyle'
  },
  footer: (pageIndex, pageCount) => ({
    text: `${pageIndex}/${pageCount}`,
    alignment: Alignment.center
  }),
  styles: {
    headerStyle: {
      fontSize: 16,
      bold: true,
      margin: [0, 10],
      alignment: Alignment.center
    }
  }
}