如何在 angular-cli 上使用外部库？ (pdf制作)

Question

好的，所以，我在我的测试项目中使用 angular-cli，因为我是网络开发领域的新手，所以我在尝试新的想法。这次我没能成功。

嗯，我试过什么？

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

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

嗯，我收到这个错误：

GET http://localhost:4200/build/pdfmake.min.js GET http://localhost:4200/build/vfs_fonts.js 404 (Not Found)

所以，我拿走了，并在我的组件中只导入了 pdfmake，如下所示：

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

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

pdfmake.createPdf(this.docDefinition).下载();

docDefinition代表我的pdf内容。

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

ERROR Error: File 'Roboto-Regular.ttf' not found in virtual file system

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

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

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

@编辑

我尝试了他所做的同样的事情，事实上它在我的项目中与 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"
      ],

事实上我无法使用 pdfmake.createPdf("content") 即使 vfs_fonts 导入：

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

Answer 1

首先你需要通过 npm 安装你的 pdfmake

npm install pdfmake --save

它会将您的包裹保存在 node_modules

之后您可以像这样访问 pdfmake

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

在使用 pdfMake 之前像这样初始化

 pdfMake.vfs = pdfFonts.pdfMake.vfs;

示例：-

import { Component } from '@angular/core';
 import * as pdfMake from 'pdfmake/build/pdfmake';
 import * as pdfFonts from 'pdfmake/build/vfs_fonts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
constructor(){
     //called first time before the ngOnInit()
     pdfMake.vfs = pdfFonts.pdfMake.vfs;
      var dd = { content: 'your pdf data' };
    pdfMake.createPdf(dd).download();
  }

}

它应该可以工作。

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

Answer 2

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

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

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

所有其他静态资产，如 Roboto-Regular.ttf 复制到 src/assets/ 文件夹中。整个 assets 文件夹将在转译时自动复制到 dist 中。然后在您的 index.html 中包含它们，例如 assets/oboto-Regular.ttf

如何在 angular-cli 上使用外部库？ (pdf制作)

How to use external library on angular-cli? (pdfmake)

angular

typescript

angular-cli

pdfmake