用于动态表的jspdf自动表

Question

I have used auto table for for dynamically generated table.It will display 1 or 2 or 3 table based on rsponse. but not more than 3 tables.I want to display the align two table in single row.If third one occur with will display below the table. I have tried as .

for me If 1st and 3rd table comes It will shows 1st in left side first row and 3rd displays below the 1st table which I want to display right side in 1st row.

 function generate(enhance) { group1='1'; group2=''; group3='1'; //const doc = new jsPDF('l', 'mm'); const doc = new jsPDF('p', 'pt', 'a4'); var i=0; if(group1.length){ i+=1; if ( i % 2 == 0) { alert('Even Number'); displayposition='left'; }else{ alert('odd Number'); displayposition='right'; } var res = doc.autoTableHtmlToJson(document.getElementById('geo_summarynew')); doc.text(7, 15, "Pipeline as of july"); doc.autoTable(res.columns, res.data,{ startY: 30, showHead: 'firstPage', styles: { overflow: 'hidden',fontSize:5}, margin: { right: 305 }, });} if(group2.length){ i+=1; if ( i % 2 == 0) { alert('Even Number'); displayposition='left'; }else{ alert('odd Number'); displayposition='right'; } var res3 = doc.autoTableHtmlToJson(document.getElementById('group2new')); doc.text(7, 15, "close won "); doc.autoTable(res3.columns, res3.data,{ startY: 30, showHead: 'firstPage', styles: { overflow: 'hidden',fontSize:5 }, margin: { left: 305 }, });} if(group3.length){ i+=1; if ( i % 2 == 0) { alert('Even Number'); displayposition='left'; }else{ alert('odd Number'); displayposition='right'; } var res4 = doc.autoTableHtmlToJson(document.getElementById('group3new')); doc.autoTable(res4.columns, res4.data,{ startY: doc.lastAutoTable.finalY + 50, showHead: 'firstPage', styles: { overflow: 'hidden',fontSize:5}, margin: { right: 305 }, });} doc.save('test Report'); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://unpkg.com/jspdf"></script> <script src="https://simonbengtsson.github.io/jsPDF-AutoTable/dist/jspdf.plugin.autotable.js"></script> <button id="cmd" class="pdf-download" onclick="generate(true)">Make PDF</button> <table id="geo_summarynew"> <thead><tr class="hidden1"><th data-style="Header" style="background-color: #66cdf2; color: #000">Opportunity</th><th data-style="Header" style="background-color: #66cdf2; color: #000">Pipeline Count</th><th data-style="Header" style="background-color: #66cdf2; color: #000">Pipeline Value</th></tr> </thead> <tbody><tr><td>Qualified</td><td>29</td><td>8156520</td></tr><tr><td>Proposal Submitted</td><td>50</td><td>22949308</td></tr></tbody> </table> <table id="group2new"> <thead><tr class="hidden1"><th data-style="Header" style="background-color: #66cdf2; color: #000">Opportunity</th><th data-style="Header" style="background-color: #66cdf2; color: #000">Pipeline Count</th><th data-style="Header" style="background-color: #66cdf2; color: #000">Pipeline Value</th></tr><tr></tr> </thead> <tbody><tr><td>Closed Won</td><td>65</td><td>15712559</td></tr></tbody> </table> <table id="group3new"> <thead><tr class="hidden1"><th data-style="Header" style="background-color: #66cdf2; color: #000">Opportunity</th><th data-style="Header" style="background-color: #66cdf2; color: #000">Pipeline Count</th></tr><tr></tr> </thead> <tbody><tr><td>Closed Lost</td><td>156</td></tr></tbody> </table>

Answer 1

You did everything so well. Just modified your code a bit.

I tested with 2 cases: 3 tables and 2 tables.

Here is the sample. I hope the result as you expected, my friend:))

function generate(enhance) {
    group1='1';
    group2=''; 
    group3='1';
    
  //const doc = new jsPDF('l', 'mm');
 const doc = new jsPDF('p', 'pt', 'a4');
 var i=0;
 if(group1.length){
     i+=1;
     if ( i % 2 == 0) {    
    displayposition='left';
}else{    
    displayposition='right';
}

  var res = doc.autoTableHtmlToJson(document.getElementById('geo_summarynew'));
  doc.text(7, 15, "Pipeline as of july");
 doc.autoTable(res.columns, res.data,{
   
         startY: 30,
    showHead: 'firstPage',
    styles: { overflow: 'hidden' ,fontSize:5},
    margin: { right: 305 },
  });}
 if(group2.length){
     i+=1;
     if ( i % 2 == 0) {    
    displayposition='left';
}else{    
    displayposition='right';
}
  var res3 = doc.autoTableHtmlToJson(document.getElementById('group2new'));
  doc.text(300, 15, "close won ");
 doc.autoTable(res3.columns, res3.data,{
   
         startY: 30,
    showHead: 'firstPage',
    styles: { overflow: 'hidden',fontSize:5 },
    margin: { left: 305 },
  });}
 if(group3.length){
     i+=1;
     if ( i % 2 == 0) {    
    displayposition='left';
}else{    
    displayposition='right';
}
  var res4 = doc.autoTableHtmlToJson(document.getElementById('group3new'));
  
  let start_y = 30;
  let margin_left = 0;
  let margin_right = 0;
  if(group2.length){
    start_y = doc.lastAutoTable.finalY + 50;
    margin_right = 305;
    margin_left = 40;
    }
    else{   
    margin_left = 305;
    margin_right = 40;
    }
  
 doc.autoTable(res4.columns, res4.data,{
   
         startY: start_y,
    showHead: 'firstPage',
    styles: { overflow: 'hidden' ,fontSize:5},
    margin: { left: margin_left, right: margin_right },
  });
}
   doc.save('test Report');
  }