Faire pdfMake travailler avec angulaire 4 et webpack

Question

Je veux utiliser pdfMake dans mon Angular 4 app j'ai donc essayé this, mais depuis que je l'utilise webpack, webpack m'a donné cette erreur:

Could not find a declaration file for module 'pdfmake/build/pdfmake' 

Alors, j'ai ajouté les scripts à ma liste vendor.ts

import 'pdfmake/build/pdfmake'; 
import 'pdfmake/build/vfs_fonts'; 

changé ma ProvidePlugin à ce qui suit:

new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jQuery: 'jquery', 
     'window.jQuery': 'jquery', 
     Popper: ['popper.js', 'default'], 
     pdfMake: 'pdfmake' 
    }), 

et a fait cela dans le composant où je veux utiliser pdfMake

//imports 
declare var pdfMake: any; 
declare var pdfFonts: any; 

@Component.... 
export class MyComponent { 
    constructor() { 
     pdfMake.vfs = pdfFonts.pdfMake.vfs; 
     var dd = { content: 'your pdf dataaaaaaaa' }; 
     pdfMake.createPdf(dd).download(); 
    } 

} 

Cela m'a donné l'erreur ReferenceError: pdfFonts is not defined, mais si je commente la première ligne du constructeur et la déclaration, je reçois cette erreur:

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

qui est une erreur pdfMake.

Ma question serait comment déclarer les polices du fichier vfs_fonts pour que je puisse les utiliser?

Answer 1

je fini par faire une PrinterService qui ressemble à ceci:

@Injectable() 
export class PrinterService { 
    private readonly pdfFonts: any; 
    pdfMake: any; 

    constructor() { 
     this.pdfMake = require('pdfmake/build/pdfmake.js'); 
     this.pdfFonts = require('pdfmake/build/vfs_fonts.js'); 
     this.pdfMake.vfs = this.pdfFonts.pdfMake.vfs; 
    } 
} 

j'ai une fonction qui retourne un objet prédéfini avec en-tête et pied de page prédéfini, les numéros de page, etc. afin que vous ne devez pas taper la définition du document partout où vous en avez besoin.