Home:ALL Converter>Angular2: How to use pdfmake library

Angular2: How to use pdfmake library

Ask Time:2017-07-17T12:44:48         Author:Softhinker.com

Json Formatter

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!

Author:Softhinker.com,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/45136111/angular2-how-to-use-pdfmake-library
Softhinker.com :

Following the instruction above made by @benny_boe , I've made it work! Let me summarize it as below:\n\nFirst,\n\nnpm install pdfmake --save\n\n\nSecond, add below to typings.d.ts:\n\ndeclare module 'pdfmake/build/pdfmake.js';\ndeclare module 'pdfmake/build/vfs_fonts.js';\n\n\nThird, in the file where pdfMake is being used, either component or service, add below lines:\n\nimport * as pdfMake from 'pdfmake/build/pdfmake.js';\nimport * as pdfFonts from 'pdfmake/build/vfs_fonts.js';\npdfMake.vfs = pdfFonts.pdfMake.vfs;\n\n\nLast, use pdfMake.xxx() as usual.",
2017-07-18T00:28:19
benny_boe :

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.\n\n\n Once you import a library via the scripts array, you should not import it via a import statement in your TypeScript code...\n\n\n(There are no typings for pdfmake so you'll need to declare them when unsing the config file..)\n\nSo 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.\n\nWhen your imports are looking like this it should work:\n\nimport pdfMake from 'pdfmake/build/pdfmake';\nimport pdfFonts from 'pdfmake/build/vfs_fonts';\npdfMake.vfs = pdfFonts.pdfMake.vfs;\n",
2017-07-17T08:11:48
Shift 'n Tab :

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.\n\nOn angular-cli.json file\n\n\"scripts\": [\n \"../node_modules/pdfmake/build/pdfmake.min.js\",\n \"../node_modules/pdfmake/build/vfs_fonts.js\"\n],\n\n\nON src/typings.d.ts file\n\nAdd declare var pdfMake: any; line below.\n\nNow anywhere in your application the pdfMake global variable is now available.\n\nTry to log pdfMake in the contructor or any init methods\n\nngOnInit() { console.log(pdfMake); }\n\n\nOUTPUT\n\n{\n createdPdf: f(t),\n vfs: {\n Roboto-Italic.ttf: \"some long encoded string...\",\n Roboto-Medium.ttf: \"some long encoded string...\",\n Roboto-MediumItalic.ttf: \"some long encoded string...\",\n Roboto-Regular.ttf: \"some long encoded string...\",\n }\n}\n\n\nWhich means it is ready to use.",
2018-04-29T14:56:08
yy