Angular2:如何使用pdfmake库 [英] Angular2: How to use pdfmake library

问题描述

尝试在我的Angular 2(版本= 4.2.x)中使用客户端pdf库 pdfmake 项目.

Trying to use client-side pdf library pdfmake in my Angular 2 (version=4.2.x) project.

在.angular-cli.json文件中，我这样声明js:

In .angular-cli.json file, I declared js like this:

"scripts": [
    "../node_modules/pdfmake/build/pdfmake.js",
    "../node_modules/pdfmake/build/vfs_fonts.js"
  ]

然后在app.component.ts中，我像这样使用它:

And then in app.component.ts, I used it like this:

import * as pdfMake from 'pdfmake';

@Component({
selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
   pdf: any;
   downloadPdf() {
    let item = {firstName: 'Peter', lastName: 'Parker'};
    this.pdf = pdfMake;
    this.pdf.createPdf(buildPdf(item)).open();
  }
}

function buildPdf(value) {
   var pdfContent = value;
   var docDefinition = {
     content: [{
    text: 'My name is: ' + pdfContent.firstName  + ' ' + pdfContent.lastName + '.'
     }]
   }
   console.log(pdfContent);
   return docDefinition;
}

加载应用程序时，我在浏览器控制台中遇到以下错误:

I hit below error in browser console when loading the app:

Uncaught TypeError: fs.readFileSync is not a function
at Object.<anonymous> (linebreaker.js:15)
at Object.<anonymous> (linebreaker.js:161)
at Object.../../../../linebreak/src/linebreaker.js (linebreaker.js:161)
at __webpack_require__ (bootstrap b937441…:54)
at Object.../../../../pdfmake/src/textTools.js (textTools.js:4)
at __webpack_require__ (bootstrap b937441…:54)
at Object.../../../../pdfmake/src/docMeasure.js (docMeasure.js:4)
at __webpack_require__ (bootstrap b937441…:54)
at Object.../../../../pdfmake/src/layoutBuilder.js (layoutBuilder.js:7)
at __webpack_require__ (bootstrap b937441…:54)

我解决此问题的方法是:

My workaround for solving this problem is:

将pdfmake.js和vfs_fonts.js复制到资产文件夹，然后将其添加到index.html:

Copy pdfmake.js and vfs_fonts.js to assets folder, and then add this to index.html:

<script src='assets/pdfmake.min.js'></script>
<script src='assets/vfs_fonts.js'></script>

从app.component.ts中删除

Remove this from app.component.ts

import * as pdfMake from 'pdfmake';

并将其添加到app.component.ts:

And add this to app.component.ts:

declare var pdfMake: any;

最后将其从.angular-cli.js中删除:

Finally remove this from .angular-cli.js:

"../node_modules/pdfmake/build/pdfmake.js",
"../node_modules/pdfmake/build/vfs_fonts.js"

它可以工作，但仍然是一种解决方法.

It works but it's still a workaround.

有人知道如何以Angular/Typscript方式使用此库吗?

Anyone knows how to use this library in Angular/Typscript way?

非常感谢！

推荐答案

按照@benny_boe的上述说明，我使它起作用了！让我总结一下如下:

Following the instruction above made by @benny_boe , I've made it work! Let me summarize it as below:

首先

npm install pdfmake --save

第二，在下面的types.d.ts中添加:

Second, add below to typings.d.ts:

declare module 'pdfmake/build/pdfmake.js';
declare module 'pdfmake/build/vfs_fonts.js';

第三，在使用pdfMake的文件(组件或服务)中，添加以下几行:

Third, in the file where pdfMake is being used, either component or service, add below lines:

import * as pdfMake from 'pdfmake/build/pdfmake.js';
import * as pdfFonts from 'pdfmake/build/vfs_fonts.js';
pdfMake.vfs = pdfFonts.pdfMake.vfs;

最后，照常使用pdfMake.xxx().

Last, use pdfMake.xxx() as usual.

这篇关于Angular2:如何使用pdfmake库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！