Angular2 - PDF aus HTML mit jspdf erstellen

Question

Für ein Projekt, an dem ich gerade arbeite, muss ich in der Lage sein, eine PDF der Seite zu generieren, auf der sich der Benutzer gerade befindet, für die ich jspdf verwenden werde. Da ich eine HTML habe ich brauche, um eine PDF mit zu generieren, brauche ich die addHTML() Funktion. Es gibt eine Menge Thema darüber, sagen

You'll either need to use html2canvas or rasterizehtml .

habe ich gewählt html2canvas zu verwenden. Dies ist, was mein Code sieht aus wie zur Zeit:

import { Injectable, ElementRef, ViewChild } from '@angular/core'; 
import * as jsPDF from 'jspdf'; 
import * as d3 from 'd3'; 
import * as html2canvas from 'html2canvas'; 

@Injectable() 
export class pdfGeneratorService { 

    @ViewChild('to-pdf') element: ElementRef; 

    GeneratePDF() { 
    html2canvas(this.element.nativeElement, <Html2Canvas.Html2CanvasOptions>{ 
     onrendered: function(canvas: HTMLCanvasElement) { 
     var pdf = new jsPDF('p','pt','a4'); 

     pdf.addHTML(canvas, function() { 
      pdf.save('web.pdf'); 
     }); 
     } 
    }); 
    } 
} 

Wenn diese Funktion aufgerufen wird, erhalte ich eine Fehlerkonsole:

EXCEPTION: Error in ./AppComponent class AppComponent - inline template:3:4 caused by: You need either https://github.com/niklasvh/html2canvas or https://github.com/cburgmer/rasterizeHTML.js

Warum genau ist das? Ich gebe eine canvas als Parameter und es heißt immer noch, dass ich html2canvas verwenden muss.

Answer 1

Was ich arbeitete gefunden wurde hinzugefügt:

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> 

auf die Datei index.html (es vermutlich an anderer Stelle sein könnte).

ich dann gebraucht:

const elementToPrint = document.getElementById('foo'); //The html element to become a pdf 
const pdf = new jsPDF('p', 'pt', 'a4'); 
pdf.addHTML(elementToPrint,() => { 
    doc.save('web.pdf'); 
}); 

, die nicht mehr html2canvas im Code verwendet.
Sie können den folgenden Import dann entfernen:

import * as html2canvas from 'html2canvas'; 

Answer 2

es so versuchen:

GeneratePDF() { 
    html2canvas(this.element.nativeElement, <Html2Canvas.Html2CanvasOptions>{ 
     onrendered: function(canvas: HTMLCanvasElement) { 
     var pdf = new jsPDF('p','pt','a4');  
     var img = canvas.toDataURL("image/png"); 
     pdf.addImage(img, 'PNG', 10, 10, 580, 300); 
     pdf.save('web.pdf'); 
     } 
    }); 
    } 

Answer 3

Wer immer noch versuchen, einen HTML-div auf ein PDF-Format konvertieren kann entscheiden, html2pdf zu verwenden, mit einem paar Linien können Sie alles mit Leichtigkeit tun.

var element = document.getElementById('element-to-print'); 
html2pdf(element);