Заставляем pdfMake работать с Angular 4 и webpack

Я хочу использовать pdfMake в своем приложении Angular 4, поэтому я попробовал этот, но так как я использую webpack, webpack выдало мне эту ошибку:

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

Итак, я добавил сценарии в свой vendor.ts список.

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

изменил мой ProvidePlugin на следующее:

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

и сделал это в компоненте, где я хочу использовать 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();
    }

}

Это дало мне ошибку ReferenceError: pdfFonts is not defined, но если я закомментирую первую строку в конструкторе и объявлении, я получаю эту ошибку:

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

что является ошибкой pdfMake.

Мой вопрос будет заключаться в том, как объявить шрифты из файла vfs_fonts, чтобы я мог их использовать?


webpack angular pdfmake
person GregoryHouseMD    schedule 27.09.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

В итоге я сделал PrinterService, который выглядит так:

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

У меня есть функция, которая возвращает предопределенный объект с предопределенными верхним и нижним колонтитулами, номерами страниц и т. д., поэтому вам не нужно вводить определение документа везде, где вам это нужно.

person GregoryHouseMD    schedule 05.11.2017

arrow_upward
1
arrow_downward

Я проверил, это работает для меня.

  1. npm install pdfmake --save
  2. Внутри компонента или службы: import * as pdfMake from 'pdfmake/build/pdfmake'; import * as pdfFonts from 'pdfmake/build/vfs_fonts';
  3. внутри конструктора: constructor() { pdfMake.vfs = pdfFonts.pdfMake.vfs; }
  4. везде, где вы хотите использовать pdfmake: const dd = { content: 'your pdf data' }; pdfMake.createPdf(dd).open();
person xwa130    schedule 30.11.2018