使用 Angular 4 和 webpack 制作 pdf

Question

我想在我的 Angular 4 应用程序中使用 pdfMake，所以我尝试了，但由于我使用的是 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 文件中声明字体以便我可以使用它们？

Answer 1

我最终制作了一个如下所示的 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;
    }
}

我有一个功能，returns 一个带有预定义页眉和页脚、页码等的预定义对象，这样您就不必在需要的地方键入文档定义。

Answer 2

我已经测试过了，这对我有用。

npm install pdfmake --save
组件或服务内部： import * as pdfMake from 'pdfmake/build/pdfmake'; import * as pdfFonts from 'pdfmake/build/vfs_fonts';
内部构造函数： constructor() { pdfMake.vfs = pdfFonts.pdfMake.vfs; }
任何你想使用 pdfmake 的地方： const dd = { content: 'your pdf data' }; pdfMake.createPdf(dd).open();

使用 Angular 4 和 webpack 制作 pdf

Making pdfMake work with Angular 4 and webpack

webpack

pdfmake

angular