Come avere più pagine PDF utilizzando jsPDF con HTML2Canvas

Question

Ho uno script che utilizza HTML2Canvas per acquisire uno screenshot di div all'interno della pagina e quindi lo converte in un pdf utilizzando jsPDF.

Il problema è che il pdf generato è una sola pagina e in alcuni casi lo screenshot richiede più di una pagina. Ad esempio lo screenshot è più grande di 8.5x11. La larghezza è buona, ma ho bisogno di creare più di una pagina per adattarla all'intero screenshot.

Ecco il mio script:

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

Tutte le idee come potrei modificare da permettere per più pagine?

Answer 1

è possibile utilizzare l'opzione Split pagina di addhtml come questa:

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

Nota: Questo si romperà il codice html su più pagine, ma queste pagine sarà ottenere allungato. Lo stretching è un problema in addhtml fino ad ora e non sono ancora in grado di trovare su internet come risolvere questo problema.

Answer 2

pdf.addHtml doesnot lavoro se ci sono immagini SVG sulla pagina web .. copio la soluzione qui: // si supponga che il quadro è già in una var canvas imgData = canvas.toDataURL ('image/png ');/* Ecco i numeri (larghezza e altezza della carta) che ho trovato che funzionano. Crea ancora una piccola parte di sovrapposizione tra le pagine, ma abbastanza buono per me. se riesci a trovare un numero ufficiale da jsPDF, usali. */

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