Colspan and Rowspan using JSPDF AutoTable Example

Question

I'm new to jsPDF and I'm using jsPDF AutoTable (https://github.com/simonbengtsson/jsPDF-AutoTable). I have multiple table Headers with Rowspan and Colspan in my table with sub-rows. When I run JSPDF with AUTOTABLE as 'False' it prints the complete table on A4 but its compact and half the page which is not as expected. It should print completely on A4 Page with width as table and on multiple pages with header as Date and Footer as Page No's.

Here is the JSFiddle for the issue.

Here is what I tried:

//script to download as PDF 
 $('#reportpdf').click(function(){
    var children = $('#report tr.child').length;
    var visibleChildren = $('#report tr.child:visible').length;
       $('#report tr.child').show();
    var divToPrint=document.getElementById("report");   
            $('#report').tableExport({type:'pdf',
                                        fileName: 'Org_Status_Report',
                      jspdf: {orientation: 'p',
                       format: 'a4',
                               margins: {left:20, top:10},
                               autotable: false}
                      });
                  $('#report tr.child').hide();
                            });

Here is what the output I am getting:

Output A4 Page-One First-half

Output A4 Page-One Second-half

When I used AutoTable, the table is printed without the table header i.e., the 1st two headers are missing. I dont know where is the issue in my code. Tried every example mentioned in Demo and Code

Here is the code with AutoTable:

$('#reportpdf').click(function(){
    var children = $('#report tr.child').length;
    var visibleChildren = $('#report tr.child:visible').length;
        $('#report tr.child').show();
    var divToPrint=document.getElementById("report");
        $('#report').tableExport({type:'pdf',
                         fileName: 'Org_Status_Report',
                         //ignoreColumn: [4],
                       jspdf: {orientation: 'p',
                               format: 'a4',
                               margins: {left:20, top:20, botton:20, right:20},
                                autotable: {
                                      styles: {cellPadding: 2,
                                      fillColor: 'inherit',
                                      textColor: 'inherit',
                                      fontStyle: 'normal',
                                      overflow: 'ellipsize',
                                      halign: 'inherit',
                                      valign: 'middle'},
                              headerStyles: {
                                            halign: 'inherit',
                                            valign: 'middle'},
                              alternateRowStyles: {fillColor: 245}
                                }
                      }
        });
                              $('#report tr.child').hide();
                });

Here is what the output I am getting when I used Autotable:

Output as complete A4 Page using AutoTable

Can any experts help ?

sao sao · Accepted Answer · 2019-09-21T15:06:50

I've used JSPDF to fill a PDF form. I have an idea, might work, might not.

Print your form to PDF/then convert that to a base 64 image and paste the code manually into your JS. Then use X,Y axes to place the data where you want it on the base 64 image. it might be a pain but it will work after some adjustments.

Colspan and Rowspan using JSPDF AutoTable Example

1 Answers