Comment utiliser la bibliothèque externe sur angular-cli? (pdfmake)

Question

Ok, donc, im en utilisant angular-cli pour mon projet de test et depuis im nouveau dans le monde du développement web im essayer de nouvelles pensées. Cette fois, je ne pouvais pas le faire fonctionner.

Eh bien, ce que j'ai essayé?

bien je genre suivi readme pdfmake et dans mon index.html j'ai placé ces deux lignes à l'intérieur balise body:

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

bien

, Im obtenir cette erreur:

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

Alors, je pris que loin, et dans mon composant, j'ai seulement importé pdfmake, comme ceci:

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

et ce qu'il fait s? bien, rien, je ne l'ai toujours pas appelé n'importe où dans mon code, en train de faire:

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

docDefinition est l'abréviation de mon contenu pdf.

ok, et maintenant? Cette erreur apparaît:

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

ok, j'ai probablement besoin d'importer vfs_font, où? Eh bien, je n'ai aucune idée, j'ai essayé d'importer dans angular-cli.json à l'étiquette de scripts, non, ne fonctionne pas, j'ai même essayé d'importer à mon composant, non.

J'ai essayé d'utiliser la bibliothèque ng-pdf-make trouvée et le site npm, ça ne marche pas du tout.

Im probablement faire une erreur novice, désolé si son quelque chose de facile et stupide: P.

@EDIT

J'ai essayé la même chose qu'il a fait, et en fait, il travaille avec jquery dans mon projet, mais il ne fonctionne pas pour pdfmake.

Ceci est mon balise script-cli.json angulaire:

"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" 
     ], 

et il y a le fait que je ne peux pas utiliser pdfmake.CreatePDF ("contenu") même avec les vfs_fonts importation:

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

Answer 1

Vous devez d'abord installer votre pdfmake par NPM

npm install pdfmake --save 

il sauvera votre paquet dans node_modules

après que vous pouvez accéder à pdfmake comme ceci

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

avant d'utiliser pdf Faire initialize comme ça

pdfMake.vfs = pdfFonts.pdfMake.vfs; 

exemple: -

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

} 

son devrait fonctionner. Vous n'avez pas besoin d'ajouter quoi que ce soit dans l'index.html ou dans les scripts.

Answer 2

pdfmake.min.js est dans node_modules, alors comment le navigateur accède-t-il au pdfmake.min.js dans node_modules? Seul le contenu du dossier dist est disponible pour le monde extérieur, donc pour le navigateur.

Installer module NPM comme @Jonnysai dit et configurer .angular-cli.json comme suit

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

Tous les autres actifs statiques comme Roboto-Regular.ttf copie dans le dossier src/assets/. L'ensemble du dossier assets sera automatiquement copié dans dist lors de la transmission. Puis dans votre index.html, incluez-les comme assets/oboto-Regular.ttf