Wie mehrere PDF-Seiten mit jsPDF mit HTML2Canvas haben

Question

Ich habe ein Skript, das HTML2Canvas verwendet, um einen Screenshot von div innerhalb der Seite zu erstellen, und konvertiert es dann mithilfe von jsPDF in eine PDF.

Das Problem ist das PDF, das generiert wird, ist nur eine Seite, und der Screenshot erfordert in einigen Fällen mehr als eine Seite. Zum Beispiel ist der Screenshot größer als 8.5x11. Die Breite ist in Ordnung, aber ich brauche es, um mehr als eine Seite zu erstellen, die auf den gesamten Screenshot passt.

Hier ist mein Skript:

var pdf = new jsPDF('portrait', 'pt', 'letter'); 
$('.export').click(function() { 
     pdf.addHTML($('.profile-expand')[0], function() { 
      pdf.save('bfc-schedule.pdf'); 
     }); 
}); 

Irgendwelche Ideen, wie ich, dass für mehrere Seiten zu ermöglichen, ändern könnte?

Answer 1

können Sie Seite Split-Option von addhtml wie folgt verwenden:

var options = { 
    background: '#fff', 
    pagesplit: true 
}; 

var doc = new jsPDF(orientation, 'mm', pagelayout); 
doc.addHTML(source, 0, 0, options, function() { 
     doc.save(filename + ".pdf"); 
     HideLoader();`enter code here` 
}); 

Hinweis: Dies wird die HTML-Datei auf mehreren Seiten brechen, aber diese Seiten gedehnt. Stretching ist ein Problem in Addhtml bis jetzt und ich bin immer noch nicht in der Lage, im Internet zu finden, wie Sie dieses Problem lösen.

Answer 2

pdf.addHtml Arbeit doesnot wenn es svg Bilder auf der Webseite sind .. ich die Lösung hier kopieren: // Ihr Bild nehme bereits in einer Leinwand var ist imgData = canvas.toDataURL ('image/png ');/* Hier sind die Zahlen (Papierbreite und -höhe), die ich gefunden habe, um zu arbeiten. Es schafft immer noch einen kleinen Überlappungsteil zwischen den Seiten, aber gut genug für mich. Wenn Sie eine offizielle Nummer von jsPDF finden können, verwenden Sie sie. */

var imgWidth = 210; 
var pageHeight = 295; 
var imgHeight = canvas.height * imgWidth/canvas.width; 
var heightLeft = imgHeight; 
var doc = new jsPDF('p', 'mm'); 
var position = 0; 

doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); 
heightLeft -= pageHeight; 

while (heightLeft >= 0) { 
    position = heightLeft - imgHeight; 
    doc.addPage(); 
    doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); 
    heightLeft -= pageHeight; 
} 
doc.save('file.pdf');`