如何在 angular-cli 上使用外部库?(pdfmake)

问题描述

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

Ok, so, im using angular-cli for my test project and since im new to web development world im trying new thinks. This time I couldn't make it work.

嗯，我尝试了什么?

好吧，我跟着 pdfmake readme 进入我的 index.html 我把这两行放在 body 标签中:

well I kind followed pdfmake readme and into my index.html I placed this two lines inside body tag:

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

好吧，我收到此错误:

GET http://localhost:4200/build/pdfmake.min.jsGET http://localhost:4200/build/vfs_fonts.js 404(未找到)

所以，我拿走了，在我的组件中我只导入了 pdfmake，就像这样:

So, I took than away, and into my component I only imported pdfmake, like this:

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

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

and what it does? well, nothing, i still didn't called it any where in my code, doing now:

pdfmake.createPdf(this.docDefinition).download();

pdfmake.createPdf(this.docDefinition).download();

docDefinition 代表我的 pdf 内容.

docDefinition stands for my pdf content.

好的，现在呢?出现此错误:

ok, and now? This error appears:

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

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

ok, I probably need to import vfs_font, where? well, I have no idea, i tried importing in angular-cli.json at scripts tag, nope, dont work, I even tried importing at my component, nope.

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

I tried using ng-pdf-make library found ant npm site, well it doesn't work at all.

我可能犯了一个新手错误，对不起，如果它简单而愚蠢:P.

Im probably making an novice mistake, sorry if its something easy and dumb :P.

@编辑

我尝试了他做的同样的事情，实际上它在我的项目中适用于 jquery，但不适用于 pdfmake.

I tried the same thing he did, and in fact it works with jquery in my project, but it doesn't work for pdfmake.

这是我的 angular-cli.json 脚本标签:

This is my angular-cli.json script tag:

"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") :

and there is the fact that I cant use pdfmake.createPdf("content") even with the vfs_fonts import:

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

推荐答案

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

First you need install your pdfmake through npm

npm install pdfmake --save

它将把你的包保存在 node_modules

之后你可以像这样访问pdfmake

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

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

before using pdfMake initialize like this

 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 或脚本中添加任何内容.

you don't need add any thing in the index.html or scripts.

这篇关于如何在 angular-cli 上使用外部库?(pdfmake)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！