JsPDF Autotable: Wie zeige ich zwei Tabellen nebeneinander an, die sich über mehrere Seiten erstrecken?

Question

Ich versuche Autotable zu verwenden, um Informationen für zwei Tabellen nebeneinander anzuzeigen. Wenn ich nicht so viele Einträge habe und die Information nur eine Seite benötigt, wird sie angezeigt. Wenn jedoch viele Daten und mehrere Seiten vorhanden sind, wird die zweite Tabelle erst dann angezeigt, wenn die erste Tabelle die meisten Einträge angezeigt hat.

Hier ist ein JsFiddle mit Beispieldaten zur Veranschaulichung des Problems. Ich habe versucht, die Y-Position der zweiten Tabelle zu ändern, aber es scheint nur die Daten auf der angezeigten Seite nach oben zu bewegen und schneidet die Daten oben ab, anstatt sie auf die vorherigen Seiten zu verschieben.

function generatePdf() { 
     header = ["Reason","Duration","Start time"]; 
    content = [ 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"], 
       ["Analyzer blowback","10h15m","08:04"] 

         ]; 

    var doc = new jsPDF('p', 'pt'); 
    doc.autoTable(header, content, { 
     showHeader: 'firstPage', 
     styles: { fontSize: 10 }, 
     avoidPageSplit: true, 
     margin: { right: 305 } 
    }); 

    doc.autoTable(header, content, { 
     showHeader: 'firstPage', 
     styles: { fontSize: 10 }, 
     avoidPageSplit: true, 
     margin: { left: 305 } 
     }); 

    doc.save("test.pdf") 
} 

generatePdf(); 

Answer 1

Ich hatte eine Sache, in der Bibliothek beheben diese so das erste, was Sie tun müssen, ermöglichen, wird Update auf die Version v2.3.1. Die zweite Sache ist, die richtige Seite zwischen dem Zeichnen der Tabellen manuell zu setzen. Ich habe Ihre fiddle mit funktionierenden Code aktualisiert, aber es kann im Grunde wie folgt geschehen:

var startingPage = doc.internal.getCurrentPageInfo().pageNumber; 
doc.autoTable(header, content, {margin: {right: 305}}); 
doc.setPage(startingPage); 
doc.autoTable(header, content, {margin: {left: 305}}); 

I aktualisiert auch die multiple tables example horizontalen Tabellen enthalten, die mehrere Tabellen umfasst.