Making pdfMake work with Angular 4 and webpack

Issue

I want to use pdfMake in my Angular 4 app so I tried this, but since I'm using webpack, webpack gave me this error:

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

So, I added the scripts to my vendor.ts list

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

changed my ProvidePlugin to the following:

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

and did this in the component where I wanna use 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();
    }

}

This gave me the ReferenceError: pdfFonts is not defined error, but if I comment out the first line in the constructor and the declaration, I get this error:

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

which is a pdfMake error.

My question would be how to declare the fonts from the vfs_fonts file so I can use them?

Solution

I ended up making a PrinterService that looks like this:

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

I have a function that returns a predefined object with predefined header and footer, page numbers etc. so you don't have to type out the document definition everywhere you need it.

Answered By - GregoryHouseMD