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. (linebreaker.js:15)
at Object. (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:

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!

user_6143656 · Answer

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.

user_11731415 · Answer

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

Angular2: How to use pdfmake library

4 Answers