如何在angular-cli上使用外部库？ （pdfmake）

Question

好的，所以，我使用angular-cli作为我的测试项目，因为我是网络开发世界的新手，我尝试新思考。这次我无法工作。

嗯，我试过了什么？

好吧我跟着pdfmake自述文件进入我的index.html我将这两行放在body标签中：

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

好吧，我收到了这个错误：

  

获取http://localhost:4200/build/pdfmake.min.js   获取http://localhost:4200/build/vfs_fonts.js 404（未找到）

所以，我带走了，而且我的组件中只导入了pdfmake，就像这样：

import * as pdfmake from 'pdfmake/build/pdfmake.js';

它的作用是什么？好吧，没有，我仍然没有在我的代码中任何地方调用它，现在就做：

pdfmake.createPdf（this.docDefinition）。下载（）;

docDefinition代表我的pdf内容。

好的，现在呢？出现此错误：

  

错误错误：在虚拟文件中找不到文件'Roboto-Regular.ttf'   系统

好吧，我可能需要导入vfs_font，在哪里？好吧，我不知道，我尝试在angular-cli.json中导入脚本标签，nope，不工作，我甚至尝试导入我的组件，nope。

我尝试使用ng-pdf-make库找到了ant npm网站，它根本不起作用。

我可能会犯一个新手的错误，抱歉，如果它简单而愚蠢：P。

@Edit

我尝试了同样的事情，实际上它在我的项目中使用了jquery，但它对pdfmake不起作用。

这是我的angular-cli.json脚本标记：

"scripts": [
        "../node_modules/pdfmake/build/pdfmake.min.js",
        "../node_modules/pdfmake/build/vfs_fonts.js",
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],

并且即使使用vfs_fonts导入，也无法使用pdfmake.createPdf（“content”）：

import * as pdfmake from 'pdfmake/build/pdfmake.min.js';
import * as pdfFonts from 'pdfmake/build/vfs_fonts.js';

Answer 1

首先，您需要通过npm

安装pdfmake

\u00bb

它会将您的包保存在npm install pdfmake --save

中

之后您可以像这样访问node_modules

pdfmake

在使用pdfMake初始化之前

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

示例： -

 pdfMake.vfs = pdfFonts.pdfMake.vfs;

它应该工作。

您不需要在index.html或脚本中添加任何内容。

Answer 2

pdfmake.min.js在node_modules中，那么浏览器如何访问node_modules中的pdfmake.min.js？只有dist文件夹内容可用于外部世界，因此可用于浏览器。

安装npm模块为@Jonnysai说并配置.angular-cli.json如下

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

所有其他静态资源（如Roboto-Regular.ttf）都会复制到src/assets/文件夹中。整个assets文件夹将在转换时自动复制到dist。然后在index.html中添加assets/oboto-Regular.ttf

之类的内容