Как использовать jsPDF с угловым 2

Question

я получил ошибку: jsPDF не определен, я, используя следующий на данный момент реализован код:

import { Component, OnInit, Inject } from '@angular/core'; 
import 'jspdf'; 
declare let jsPDF; 
@Component({ 
    .... 
    providers: [ 
    { provide: 'Window', useValue: window } 
    ] 
}) 
export class GenratePdfComponent implements OnInit { 

    constructor(
    @Inject('Window') private window: Window, 
    ) { } 

    download() { 

     var doc = jsPDF(); 
     doc.text(20, 20, 'Hello world!'); 
     doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');  
     doc.save('Test.pdf'); 
    } 
} 

У меня есть установить НПЙ jsPDF, но не знаю, как импорт jspdf и работать с угловой кли: 1.0.0-beta.17

Answer 1

Я сделал это, после того, как делать много R & D, их несколько шагов, чтобы следовать, как показано ниже: Установка:

npm install jspdf --save 

typings install dt~jspdf --global --save 

npm install @types/jspdf --save 

Добавить следующее в угловом-cli.json:

"scripts": [ "../node_modules/jspdf/dist/jspdf.min.js" ] 

HTML:

<button (click)="download()">download </button> 

компонент Ts:

import { Component, OnInit, Inject } from '@angular/core'; 
import * as jsPDF from 'jspdf' 
@Component({ 
    ... 
    providers: [ 
    { provide: 'Window', useValue: window } 
    ] 
}) 
export class GenratePdfComponent implements OnInit { 

    constructor(
    @Inject('Window') private window: Window, 
    ) { } 

    download() { 

     var doc = new jsPDF(); 
     doc.text(20, 20, 'Hello world!'); 
     doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.'); 
     doc.addPage(); 
     doc.text(20, 20, 'Do you like that?'); 

     // Save the PDF 
     doc.save('Test.pdf'); 
    } 
} 

Answer 2

Я создал jsPdf демо, основанный на this answer с помощью от @gsmalhotra

Сначала установите

npm install jspdf --save 

Я использовал массив изображений, первый преобразование изображения в base64 (jsPDF не разрешает URL-адреса изображений)

getBase64Image(img) { 
    var canvas = document.createElement("canvas"); 
    console.log("image"); 
    canvas.width = img.width; 
    canvas.height = img.height; 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img, 0, 0); 
    var dataURL = canvas.toDataURL("image/jpeg"); 
    return dataURL; 
} 

Затем в цикле я вызывал функцию выше, которая возвращает изображение base64, а затем добавляет изображение в PDF с использованием doc.addImage().

for(var i=0;i<this.images.length;i++){ 
    let imageData= this.getBase64Image(document.getElementById('img'+i)); 
    doc.addImage(imageData, "JPG", 10, (i+1)*10, 180, 150); 
    doc.addPage(); 
} 

HTML код

<div class="col-md-4" *ngFor="let img of images;let i=index"> 
    <img id="img{{i}}" class="img-fluid" crossOrigin="Anonymous" [src]="img.url"> 
</div> 

Demo
Code