Cómo usar jsPDF con angular 2

Alex, miembro de nuestro equipo de trabajo, nos ha hecho el favor de crear este post ya que conoce muy bien dicho tema.

Solución:

Lo he hecho, después de hacer mucha I + D, hay algunos pasos a seguir 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:

download 

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

Pregunta anterior, pero esta es una solución alternativa que instalé y ejecuté en mi aplicación angular. Terminé modificando esta solución jsPDF para que funcione sin usar la CLI de ionic/cordova.

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

Agregue una identificación a cualquier div que contenga el contenido que desea generar el PDF

your content here

Importar las bibliotecas

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

Agregue 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 a nivel mundial.

Creé una demostración jsPdf basada en esta respuesta con la ayuda de @gsmalhotra

Primera instalación

npm install jspdf --save

he utilizado array de imágenes, primero convirtiendo la imagen a base64 (jsPDF no permite URL de imagen)

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, llamé a la función anterior que devuelve la imagen base64 y luego agregué la imagen al PDF usando doc.addImage().

for(var i=0;i