How to use external library on angular-cli? (pdfma

Question

Ok, so, im using angular-cli for my test project and since im new to web development world im trying new thinks. This time I couldn't make it work.

Well, what I tried?

well I kind followed pdfmake readme and into my index.html I placed this two lines inside body tag:

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

well, Im getting this error:

GET http://localhost:4200/build/pdfmake.min.js GET http://localhost:4200/build/vfs_fonts.js 404 (Not Found)

So, I took than away, and into my component I only imported pdfmake, like this:

import * as pdfmake from 'pdfmake/build/pdfmake.js';

and what it does? well, nothing, i still didn't called it any where in my code, doing now:

pdfmake.createPdf(this.docDefinition).download();

docDefinition stands for my pdf content.

ok, and now? This error appears:

ERROR Error: File 'Roboto-Regular.ttf' not found in virtual file system

ok, I probably need to import vfs_font, where? well, I have no idea, i tried importing in angular-cli.json at scripts tag, nope, dont work, I even tried importing at my component, nope.

I tried using ng-pdf-make library found ant npm site, well it doesn't work at all.

Im probably making an novice mistake, sorry if its something easy and dumb :P.

@Edit

I tried the same thing he did, and in fact it works with jquery in my project, but it doesn't work for pdfmake.

This is my angular-cli.json script tag:

"scripts": [
        "../node_modules/pdfmake/build/pdfmake.min.js",
        "../node_modules/pdfmake/build/vfs_fonts.js",
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],

and there is the fact that I cant use pdfmake.createPdf("content") even with the vfs_fonts import:

import * as pdfmake from 'pdfmake/build/pdfmake.min.js';
import * as pdfFonts from 'pdfmake/build/vfs_fonts.js';

Answer 1

First you need install your pdfmake through npm

npm install pdfmake --save

it will save your package in node_modules

after that you can access pdfmake like this

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

before using pdfMake initialize like this

 pdfMake.vfs = pdfFonts.pdfMake.vfs;

example:-

import { Component } from '@angular/core';
 import * as pdfMake from 'pdfmake/build/pdfmake';
 import * as pdfFonts from 'pdfmake/build/vfs_fonts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
constructor(){
     //called first time before the ngOnInit()
     pdfMake.vfs = pdfFonts.pdfMake.vfs;
      var dd = { content: 'your pdf data' };
    pdfMake.createPdf(dd).download();
  }

}

its should work.

you don't need add any thing in the index.html or scripts.

Answer 2

pdfmake.min.js is in node_modules, so how do the browser access the pdfmake.min.js in node_modules? Only the dist folder contents are available for the outside world, thus to the browser.

Install npm module as @Jonnysai said and configure .angular-cli.json as follows

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

All other static assets like Roboto-Regular.ttf copy into src/assets/ folder. The whole assets folder will be automatically copy into dist while transpiling. Then in your index.html, include them like assets/oboto-Regular.ttf