用角4和webpack使pdfMake工作

Question

我想在我的Angular 4应用程序中使用Angular 4，所以我尝试了this，但是由于我使用的是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;
    }
}

我有一个函数，它返回一个预定义的对象，具有预定义的页眉和页脚、页码等等，所以您不必在任何需要的地方键入文档定义。

Answer 2

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

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

Answer 3

在Vs代码中，控制台建议这样做：

npm i-save-dev@type/pdfmake

这解决了我对dev构建的导入，并允许我提供测试版本。

必须在导入项下添加这一行：

(pdfMake as any).vfs = pdfFonts.pdfMake.vfs;

它就在您想要使用pdfMake的导入项下。

您无法避免它，否则它将生成一个空白文档，甚至不会作为PDF文档打开。