Angular2: How to use pdfmake library

Question

Trying to use a client side pdf book PDF file in my Angular 2 project (version = 4.2.x).

In the file .angular-cli.json, I declared js as follows:

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

When loading the application, I encountered an error in the browser console:

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 to solve this problem:

Copy pdfmake.js and vfs_fonts.js to the resources 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 is still a workaround.

Does anyone know how to use this library in Angular / Typscript mode?

Many thanks!

Answer 1

, @benny_boe, ! :

-,

npm install pdfmake --save

-, typings.d.ts:

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

-, , pdfMake, , , :

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

, pdfMake.xxx(), .

Answer 2

, . .angular-cli.json TS. Angular CLI.

, import TypeScript...

( pdfmake, ..)

, TS ... import * as pdfMake from 'pdfmake'; ( !) ('pdfmake/build/pdfmake'). ('pdfmake/build/vfs_fonts'), .

, :

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

Answer 3

Angular Cli Stories, . .

angular-cli.json

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

ON src/typings.d.ts

declare var pdfMake: any; .

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

Try writing pdfMake to 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...",
    }
}

This means that it is ready to use.

Answer 4

No need to be so complicated. I tested, this works for me.

1. npm install pdfmake --save
2. Inside a component or service: import * as pdfMake from 'pdfmake/build/pdfmake'; import * as pdfFonts from 'pdfmake/build/vfs_fonts'; import * as pdfMake from 'pdfmake/build/pdfmake'; import * as pdfFonts from 'pdfmake/build/vfs_fonts';
3. constructor() { pdfMake.vfs = pdfFonts.pdfMake.vfs; } constructor: constructor() { pdfMake.vfs = pdfFonts.pdfMake.vfs; } constructor() { pdfMake.vfs = pdfFonts.pdfMake.vfs; }
4. anywhere you want to use pdfmake: const dd = { content: 'your pdf data' }; pdfMake.createPdf(dd).open(); const dd = { content: 'your pdf data' }; pdfMake.createPdf(dd).open();

Answer 5

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