Question

我想在我的pdfMake应用中使用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：

<?php if($_SERVER['PHP_SELF']=='/index.php' || $_SERVER['PHP_SELF']=='/our-menu.php'){ ?> class="hidden" <?php } ?>

我有一个函数返回一个带有预定义页眉和页脚的预定义对象，页码等。所以你不必在任何需要的地方输出文档定义。

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

使pdfMake与Angular 4和webpack一起使用

2 个答案: