Angular2: How to use pdfmake library

Question

Trying to use client-side pdf library pdfmake in my Angular 2 (version=4.2.x) project.

In .angular-cli.json file, I declared js like this:

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

And then in app.component.ts, I used it like this:

import * as pdfMake from 'pdfmake';

@Component({
selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
   pdf: any;
   downloadPdf() {
    let item = {firstName: 'Peter', lastName: 'Parker'};
    this.pdf = pdfMake;
    this.pdf.createPdf(buildPdf(item)).open();
  }
}

function buildPdf(value) {
   var pdfContent = value;
   var docDefinition = {
     content: [{
    text: 'My name is: ' + pdfContent.firstName  + ' ' + pdfContent.lastName + '.'
     }]
   }
   console.log(pdfContent);
   return docDefinition;
}

I hit below error in browser console when loading the app:

Uncaught TypeError: fs.readFileSync is not a function
at Object.<anonymous> (linebreaker.js:15)
at Object.<anonymous> (linebreaker.js:161)
at Object.../../../../linebreak/src/linebreaker.js (linebreaker.js:161)
at __webpack_require__ (bootstrap b937441…:54)
at Object.../../../../pdfmake/src/textTools.js (textTools.js:4)
at __webpack_require__ (bootstrap b937441…:54)
at Object.../../../../pdfmake/src/docMeasure.js (docMeasure.js:4)
at __webpack_require__ (bootstrap b937441…:54)
at Object.../../../../pdfmake/src/layoutBuilder.js (layoutBuilder.js:7)
at __webpack_require__ (bootstrap b937441…:54)

My workaround for solving this problem is:

Copy pdfmake.js and vfs_fonts.js to assets folder, and then add this to index.html:

<script src='assets/pdfmake.min.js'></script>
<script src='assets/vfs_fonts.js'></script>

Remove this from app.component.ts

import * as pdfMake from 'pdfmake';

And add this to app.component.ts:

declare var pdfMake: any;

Finally remove this from .angular-cli.js:

"../node_modules/pdfmake/build/pdfmake.js",
"../node_modules/pdfmake/build/vfs_fonts.js"

It works but it's still a workaround.

Anyone knows how to use this library in Angular/Typscript way?

Thanks a lot!

Answer 1

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.

Answer 2

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;

Answer 3

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.

Answer 4

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