JsPDF Autotable：複数のページにまたがる2つのテーブルを並べて表示するにはどうすればよいですか？

Question

私は、2つのテーブルの情報を並べて表示するためにAutotableを使用しようとしています。多くのエントリーがなく、情報が1ページしか必要ない場合、それはうまく表示されます。しかし、多くのデータと複数のページがある場合、最初のテーブルがほとんどのエントリを表示するまで、2番目のテーブルは表示されません。

JsFiddleには、この問題を説明するサンプルデータがあります。私は2番目のテーブルのy位置を変更しようとしましたが、表示しているページでデータを上に移動して、前のページに移動するのではなく、データの上端を切り取っているようです。

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

これを有効にするにはライブラリにあるものを修正する必要がありました。まず、バージョンv2.3.1にアップデートする必要があります。 2つ目は、テーブルを描画する間に手動で正しいページを設定することです。私が働いて、コードを使用してfiddleを更新したが、それは基本的に次のように行うことができます。私はまた、複数のテーブルにまたがる横のテーブルを含めるようにmultiple tables exampleを更新

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

。