Jak uzyskać wiele stron pdf przy użyciu jsPDF z HTML2Canvas

Question

Mam skrypt, który używa HTML2Canvas, aby zrobić zrzut ekranu z div na stronie, a następnie konwertuje go do pliku pdf przy użyciu jsPDF.

Problem polega na tym, że wygenerowany plik PDF to tylko jedna strona, a zrzut ekranu wymaga więcej niż jednej strony w niektórych przypadkach. Na przykład zrzut ekranu jest większy niż 8,5x11. Szerokość jest dobra, ale potrzebuję jej do stworzenia więcej niż jednej strony, aby pasowała do całego zrzutu ekranu.

Oto mój skrypt:

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

Wszelkie pomysły jak można zmodyfikować to, aby umożliwić wielu stronach?

Answer 1

można użyć opcji podziału na strony addhtml tak:

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

UWAGA: Ta przerwa html na wielu stronach, ale te strony będą się rozciągać. Rozciąganie jest problemem w addhtml do tej pory i nadal nie mogę znaleźć w Internecie, jak rozwiązać ten problem.

Answer 2

pdf.addHtml doesnot pracy, jeśli istnieją SVG zdjęć na stronie internetowej .. skopiować rozwiązanie tutaj: // załóżmy zdjęcie jest już w var płótnie imgData = canvas.toDataURL ('image/png ");/* Oto liczby (szerokość i wysokość papieru), które udało mi się znaleźć. Nadal tworzy trochę nakładające się części między stronami, ale wystarczająco dobre dla mnie. jeśli możesz znaleźć oficjalny numer z jsPDF, użyj ich. */

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