how - Cómo usar jsPDF con angular 2

jspdf angular 1

Question

Recibí un error: jsPDF no está definido, actualmente estoy usando el siguiente código:

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

He instalado npm de jsPDF pero no sé cómo importar jspdf y ejecutar con angular-cli: 1.0.0-beta.17

Answer 1

He creado una demostración de jsPdf basada en share con la ayuda de @gsmalhotra

Primera instalación

npm install jspdf --save

He utilizado una matriz de imágenes, primero convertí la imagen a base64 (jsPDF no permite URL de imágenes)

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

Luego, en un bucle, he llamado a la función anterior que devuelve la imagen base64 y luego agregué la imagen a PDF usando 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();
}

Código 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>

Manifestación
Code

Answer 2

Pregunta antigua, pero esta es una solución alternativa que instalé en mi aplicación angular. Terminé modificando esta solución jsPDF para que funcione sin utilizar el CLI iónico / cordova.

npm install jspdf --save
npm install @types/jspdf --save
npm install html2canvas --save
npm install @types/html2canvas --save

Agregue un ID a cualquier div que contenga el contenido que desea generar el PDF

<div id="html2Pdf">your content here</div>

Importar las bibliotecas

import * as jsPDF from ''jspdf'';
import * as html2canvas from ''html2canvas'';

Añade el método para generar el PDF.

generatePdf() {
const div = document.getElementById("html2Pdf");
const options = {background: "white", height: div.clientHeight, width: div.clientWidth};
html2canvas(div, options).then((canvas) => {
//Initialize JSPDF
let doc = new jsPDF("p", "mm", "a4");
//Converting canvas to Image
let imgData = canvas.toDataURL("image/PNG");
//Add image Canvas to PDF
doc.addImage(imgData, ''PNG'', 20, 20);
let pdfOutput = doc.output();
// using ArrayBuffer will allow you to put image inside PDF
let buffer = new ArrayBuffer(pdfOutput.length);
let array = new Uint8Array(buffer);
for (let i = 0; i < pdfOutput.length; i++) {
array[i] = pdfOutput.charCodeAt(i);
}
//Name of pdf
const fileName = "example.pdf";
// Make file
doc.save(fileName);
});
}

Encontré que esta solución funcionó bien para mi aplicación web y fue beneficiosa ya que tengo control sobre cuándo quiero generar el PDF (después de recibir datos de forma asíncrona). Además, no necesitaba instalar ninguna biblioteca globalmente.

Answer 3

Lo he hecho, después de realizar muchas actividades de I + D, hay algunos pasos a seguir como se indica a continuación: Instalar:

npm install jspdf --save
typings install dt~jspdf --global --save
npm install @types/jspdf --save

Agregue lo siguiente en angular-cli.json:

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

html:

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

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