Jak dodać górny margines podczas używania html2canvas i jspdf, gdy płótno jest podzielone na wiele stron?

Question

Używam HTML2Canvas i jsPDF do utworzenia pdf dynamicznej strony internetowej, gdy rozmiar płótna jest świetny niż jedna strona Dodaję kolejną stronę i ponownie dodaję obraz przesuwając ją na następną stronę. Wszystko działa dobrze, ale nie wiem, jak ustawić górny margines, w wyniku czego cała strona jest na samej górze strony. Czy istnieje sposób ustawienia górnego marginesu dla wszystkich stron?

  html2canvas($("#formpdfarea"), { 
      onrendered: function(canvas) { 
       var imgData = canvas.toDataURL(
        'image/png');  
       var doc = new jsPDF('l', 'mm', 'letter'); 
       doc.addImage(imgData, 'PNG', 5, 0); 

       //output is 96dpi, additional pages added if output is greater than 816 pixels (816p/96dpi = 8.5 inches) 
       if(canvas.height > 816){ 
        for(i=1; i*816<canvas.height; i++){ 
         doc.addPage(); 
         //-215.89mm which is -8.5inches 
         doc.addImage(imgData, 'PNG',5,-215.89*i); 
        } 
       } 
       doc.save('formoutput.pdf'); 
      } 
     }); 

Answer 1

Spędziłem wiele godzin szukając rozwiązania znajdującego się w bibliotece jsPDF, ale wygląda na to, że w tej chwili nie są dostępne. Po określeniu stronyplit wydaje się ignorować inne opcje jsPDF, takie jak margines.

Zrobiłem to sam, łamiąc strony ręcznie. W rzeczywistości jest to stosunkowo proste. :)

Stworzyłem to dla dużego stołu. Jeśli próbujesz złamać coś innego niż stół, możesz nadal używać tej koncepcji. Wszystko, co naprawdę musisz zrobić, to zmienić klasy CSS, aby różne części były widoczne.

function add_page() { 
    // Youre header & footer stuff goes here 
    pdf.addHTML($('#pdfPage'), 20, 26, options, function() { 
     check_page(); 
    }); 
} 
function check_page() { 
    tr_rows = tr_rows - 28; 
    if(tr_rows > 0) { 
     $('#pdfPage').removeClass('pdf_page_' + current_pdf_page).addClass('pdf_page_' + ++current_pdf_page); 
     pdf.addPage(); 
     add_page(); 
    } else { 
     pdf.save(filename + '.pdf'); 
    } 
} 
$('#pdfPage').addClass('pdf_page_1'); 
tr_rows = $('#pdfPage tbody tr').length; 
current_pdf_page = 1; 
add_page(); 

A oto moje klasy CSS:

.pdf_page_1 tr:nth-child(n+28) { display: none; } 

.pdf_page_2 tr:nth-child(-n+28) { display: none; } 
.pdf_page_2 tr:nth-child(n+56) { display: none; } 

.pdf_page_3 tr:nth-child(-n+56) { display: none; } 
.pdf_page_3 tr:nth-child(n+84) { display: none; } 

.pdf_page_4 tr:nth-child(-n+84) { display: none; } 
.pdf_page_4 tr:nth-child(n+112) { display: none; } 

#pdfPage tr:first-child { display: table-row !important; } 

Answer 2

Postanowiłem to poprzez dostosowanie właściwości Mediabox.

Metoda putPages w jspdf zapisuje stronę i można manipulować polem nośnika i szerokości/wysokości strony, aby dostosować marginesy strony. Napisałem dodatkowe 52 (0,75 cala) na wysokość i -36 (0,5 cala) na mediabox, aby dać każdej stronie margines.

Jest to zmiana kodu:

wPt = (pageWidth = pagedim[n].width) * k; 
hPt = (pageHeight = pagedim[n].height + 52) * k; 
out('<</Type /Page'); 
out('/Parent 1 0 R'); 
out('/Resources 2 0 R'); 
out('/MediaBox [-36 0 ' + f2(wPt) + ' ' + f2(hPt) + ']'); 

będzie mieć również zmienić rozmiar strony tak, że stopka wygląda prawo również.

użyłem:

canvas.height = 72 * 10.25; // instead of 11 
canvas.width = 72 * 8.5; 

To może być włączany do odpowiedniej funkcji zamiast sztywno, ale działa teraz.