制作pdf使用Angular 4和Webpack制作

oipij1gg 于 2022-11-13 发布在 Webpack

关注(0)|答案(3)|浏览(171)

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

webpack

来源：https://stackoverflow.com/questions/46458213/making-pdfmake-work-with-angular-4-and-webpack

3条答案

按热度按时间

shstlldc1#

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

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

赞(0）回复(0）举报 2022-11-13

k4aesqcs2#

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

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

赞(0）回复(0）举报 2022-11-13

waxmsbnn3#

在Vs代码中，控制台建议这样做：
npm i --保存设备@类型/pdfmake
这解决了我的开发版本的导入问题，并允许我为我的测试版本提供ng服务。
您必须在导入项下添加此行：

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

它就在您要使用pdfMake的导入下。
您不能避免它，否则它将生成一个空白文档，甚至不能作为PDF文档打开。

赞(0）回复(0）举报 2022-11-13

我来回答

制作pdf使用Angular 4和Webpack制作

3条答案

相关问题

热门标签

最新问答