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

Question

好吧，所以，即時通訊使用angular-cli爲我的測試項目，因爲即時通訊新的Web開發世界即時通訊嘗試新的想法。這一次我無法使它工作。

那麼，我試過了嗎？

以及我那種跟着pdfmake自述，然後進入我的index.html我放在這兩條線體標籤中：

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

以及它幹什麼S'嗯，沒什麼，我仍然沒有把它叫做我的代碼中的任何地方，現在這樣做：

pdfmake.createPdf（this.docDefinition）.download（）;

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。

@Edit

我想他做同樣的事情，事實上，它使用jQuery的作品在我的項目，但它並不適用於pdfmake工作。

這是我的角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（ 「內容」），甚至與vfs_fonts導入：

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

Answer 1

首先，你需要通過NPM

npm install pdfmake --save 

它會保存你的包在node_modules

後，您可以訪問安裝您pdfmake pdfmake這樣的

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

before using pdf請初始化這樣

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文件夾內容可用於外部世界，因此可用於瀏覽器。

安裝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