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