Angular2: How to use pdfmake library

npm i pdfmake;

import * as pdfMake from 'pdfmake/build/pdfmake';
import * as pdfFonts from 'pdfmake/build/vfs_fonts';

pdfMake.vfs = pdfFonts.pdfMake.vfs;
  var dd = {
    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(dd).download();

So first things first. You do not need to add you 3rd party scripts to the .angular-cli.json AND add an import in your TS files. Take a look at the Global scripts Story from the Angular CLI.

Once you import a library via the scripts array, you should not import it via a import statement in your TypeScript code...

(There are no typings for pdfmake so you'll need to declare them when unsing the config file..)

So if you want to add it to your TS File... replace your import * as pdfMake from 'pdfmake'; (its the server-side version!) with the client-side version ('pdfmake/build/pdfmake'). You'll also need to add the fonts ('pdfmake/build/vfs_fonts') otherwise you'll get an error too.

When your imports are looking like this it should work:

import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;

Following the instruction above made by @benny_boe , I've made it work! Let me summarize it as below:

First,

npm install pdfmake --save

Second, add below to typings.d.ts:

declare module 'pdfmake/build/pdfmake.js';
declare module 'pdfmake/build/vfs_fonts.js';

Third, in the file where pdfMake is being used, either component or service, add below lines:

import * as pdfMake from 'pdfmake/build/pdfmake.js';
import * as pdfFonts from 'pdfmake/build/vfs_fonts.js';
pdfMake.vfs = pdfFonts.pdfMake.vfs;

Last, use pdfMake.xxx() as usual.

Another simple approach when using global scripts according to angular-cli Stories Global Scripts if you follow the instruction carefully. IF the library doesn't have any typings.

On angular-cli.json file

"scripts": [
  "../node_modules/pdfmake/build/pdfmake.min.js",
  "../node_modules/pdfmake/build/vfs_fonts.js"
],

ON src/typings.d.ts file

Add declare var pdfMake: any; line below.

Now anywhere in your application the pdfMake global variable is now available.

Try to log pdfMake in the contructor or any init methods

ngOnInit() { console.log(pdfMake); }

OUTPUT

{
    createdPdf: f(t),
    vfs: {
        Roboto-Italic.ttf: "some long encoded string...",
        Roboto-Medium.ttf: "some long encoded string...",
        Roboto-MediumItalic.ttf: "some long encoded string...",
        Roboto-Regular.ttf: "some long encoded string...",
    }
}

Which means it is ready to use.