Angular2:如何使用pdfmake库

Question

试图使用客户端pdf库pdfmake在我的角2 (version=4.2.x)项目.

在.角-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;

最后，将其从.角-cli.js中删除：

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

这是可行的，但它仍然是一个解决办法。

有人知道如何以角/脚本的方式使用这个库吗？

非常感谢!

Answer 1

按照@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 2

所以首先要做的是。您可以做而不是，需要将您的第三方脚本添加到.angular-cli.json 中，并且在您的TS文件中添加一个导入。从全局脚本的角度看一看它的故事。

一旦您通过脚本数组导入一个库，您应该而不是通过TypeScript代码中的导入语句导入它.

(没有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 3

另一个简单的方法，当使用全局脚本时，根据角-cli 故事全球脚本，如果您仔细地遵循指示。如果库没有任何类型。

On ange-cli.json文件

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

ON src/file ings.d.ts文件

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

现在，应用程序中的任何地方都可以使用pdfMake全局变量。

尝试在构造器或任何init方法中记录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...",
    }
}

也就是说它已经准备好使用了。