Angular2：如何使用 pdfmake 库

Question

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

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

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

然后在app.component.ts中，我是这样使用的：

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;
}

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

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)

我解决这个问题的方法是：

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

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

将此从 app.component.ts

中删除

import * as pdfMake from 'pdfmake';

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

declare var pdfMake: any;

最后从 .angular-cli.js:

中删除它

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

它有效，但它仍然是一种解决方法。

有人知道如何以 Angular/Typscript 的方式使用这个库吗？

非常感谢！

Answer 1

首先要做的就是第一件事。您 不需要 将第 3 方脚本添加到 .angular-cli.json AND 在您的 TS 文件中添加导入。查看 Angular CLI 中的 Global scripts 故事。

Once you import a library via the scripts array, you should not import it via a import statement in your TypeScript code...

（pdfmake 没有类型，因此您需要在取消配置文件时声明它们。）

因此，如果您想将它添加到您的 TS 文件中...请将您的 import * as pdfMake from 'pdfmake';（它的服务器端版本！）替换为客户端版本 ('pdfmake/build/pdfmake')。您还需要添加字体 ('pdfmake/build/vfs_fonts')，否则您也会收到错误消息。

当您的导入看起来像这样时，它应该可以工作：

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

Answer 2

按照@benny_boe 的上述说明，我成功了！让我总结如下：

首先，

npm install pdfmake --save

其次，在下面添加typings.d.ts：

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

第三，在使用 pdfMake 的文件中，无论是组件还是服务，添加以下行：

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

最后，像往常一样使用 pdfMake.xxx()。

Answer 3

根据 angular-cli Stories Global Scripts 使用全局脚本的另一种简单方法，如果您仔细按照说明进行操作。 IF 图书馆没有任何类型。

在angular-cli.json文件

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

ON src/typings.d.ts 文件

在下面添加 declare var pdfMake: any; 行。

现在，pdfMake 全局变量在您应用程序的任何位置都可用。

尝试在构造函数或任何初始化方法中记录 pdfMake

ngOnInit() { console.log(pdfMake); }

输出

{
    createdPdf: f(t),
    vfs: {
        Roboto-Italic.ttf: "some long encoded string...",
        Roboto-Medium.ttf: "some long encoded string...",
        Roboto-MediumItalic.ttf: "some long encoded string...",
        Roboto-Regular.ttf: "some long encoded string...",
    }
}

这意味着它可以使用了。

Answer 4

npm i pdfmake;

import * as pdfMake from 'pdfmake/build/pdfmake';
import * as pdfFonts from 'pdfmake/build/vfs_fonts';

pdfMake.vfs = pdfFonts.pdfMake.vfs;
  var dd = {
    content: [
      {
        layout: 'lightHorizontalLines', // optional
        table: {
          // headers are automatically repeated if the table spans over multiple pages
          // you can declare how many rows should be treated as headers
          headerRows: 1,
          widths: [ '*', 'auto', 100, '*' ],

          body: [
            [ 'First', 'Second', 'Third', 'The last one' ],
            [ 'Value 1', 'Value 2', 'Value 3', 'Value 4' ],
            [ { text: 'Bold value', bold: true }, 'Val 2', 'Val 3', 'Val 4' ]
          ]
        }
      }
    ]
  };
pdfMake.createPdf(dd).download();

Angular2：如何使用 pdfmake 库

Angular2: How to use pdfmake library

pdfmake

angular