Jak korzystać jsPDF z kątowym 2

Question

mam błąd: jsPDF nie jest zdefiniowana, jestem currentY stosując następujący kod:

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

mam zainstalować NPM z jsPDF ale nie wiem jak import jspdf i biegać z kanciasty-cli: 1.0.0-beta.17

Answer 1

zrobiłem go, po zrobieniu dużo R ​​& D, ich są kilka kroków do naśladowania, jak poniżej: zainstalować:

npm install jspdf --save 

typings install dt~jspdf --global --save 

npm install @types/jspdf --save 

dodawania po w skośnych cli.json:

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

HTML:

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

ts elementów:

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

Stworzyłem demo jsPdf oparciu o this answer z pomocą @gsmalhotra

Najpierw zainstaluj

npm install jspdf --save 

Użyłem szereg obrazów, najpierw konwersja obrazu do base64 (jsPDF nie zezwala na adresy URL obrazów)

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

Następnie w pętli, zadzwoniłem powyżej funkcji, która zwraca obraz base64, a następnie dodano obraz do pliku PDF za pomocą 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 kod

<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