Вложенные таблицы в pdf с использованием jspdf и jspdf-autotable

Question

Как достичь вложенных таблиц в PDF с помощью jspdf и jspadf-autotable? Нечто похожее на картинку ниже:

Answer 1

Там нет встроенной поддержки, имеющих вложенные таблицы в jspdf-AutoTable. И делать это с помощью крючков становится довольно грязным из-за текущей ошибки, когда вы не можете использовать графические функции в перехватах. Вот обходной путь, который записывает позиции, в которые вложенные таблицы в drawCell зацепляются, а затем краска вторичных таблиц поверх исходного в цикле впоследствии.

var elem = document.getElementById("generate"); 
 
elem.onclick = function() { 
 
    var doc = new jsPDF('p', 'pt'); 
 
    var elem = document.getElementById('table'); 
 
    var data = doc.autoTableHtmlToJson(elem); 
 
    
 
    var positions = []; 
 
    doc.autoTable(data.columns, data.rows, { 
 
    drawCell: function(cell, data) { 
 
     if (data.column.dataKey === 5) { 
 
     \t positions.push({x: cell.x, y: cell.y + 5}); 
 
     } 
 
    }, 
 
    columnStyles: { 
 
    \t 5: {columnWidth: 120} 
 
    }, 
 
    bodyStyles: { 
 
    \t rowHeight: 100 
 
    } 
 
    }); 
 
    
 
    positions.forEach(function(pos) { 
 
    var rows = [ 
 
     ["1", "2", "3", "4"], 
 
     ["1", "2", "3", "4"], 
 
     ["1", "2", "3", "4"], 
 
     ["1", "2", "3", "4"] 
 
    ]; 
 
    doc.autoTable(["One", "Two", "Three", "Four"], rows, { 
 
    \t startY: pos.y, 
 
    \t margin: {left: pos.x}, 
 
     tableWidth: 'wrap', 
 
     theme: 'grid', 
 
     styles: { 
 
     cellPadding: 3, 
 
     fontSize: 9, 
 
     rowHeight: 15 
 
     } 
 
    }); 
 
    }); 
 
    
 
    doc.save("table.pdf"); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.0.33/jspdf.plugin.autotable.js"></script> 
 
<button id="generate">Generate PDF</button> 
 

 
<table id="table" style="display: none;"> 
 
    <thead> 
 
    <tr> 
 
     <th>ID</th> 
 
     <th>First name</th> 
 
     <th>Last name</th> 
 
     <th>Email</th> 
 
     <th>Country</th> 
 
     <th>Table</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td align="right">1</td> 
 
     <td>Donna</td> 
 
     <td>Moore</td> 
 
     <td>dmoore0@furl.net</td> 
 
     <td>China</td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td align="right">2</td> 
 
     <td>Janice</td> 
 
     <td>Henry</td> 
 
     <td>jhenry1@theatlantic.com</td> 
 
     <td>Ukraine</td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td align="right">3</td> 
 
     <td>Ruth</td> 
 
     <td>Wells</td> 
 
     <td>rwells2@constantcontact.com</td> 
 
     <td>Trinidad and Tobago</td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td align="right">4</td> 
 
     <td>Jason</td> 
 
     <td>Ray</td> 
 
     <td>jray3@psu.edu</td> 
 
     <td>Brazil</td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td align="right">5</td> 
 
     <td>Jane</td> 
 
     <td>Stephens</td> 
 
     <td>jstephens4@go.com</td> 
 
     <td>United States</td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td align="right">6</td> 
 
     <td>Adam</td> 
 
     <td>Nichols</td> 
 
     <td>anichols5@com.com</td> 
 
     <td>Canada</td> 
 
     <td></td> 
 
    </tr> 
 
    </tbody> 
 
</table>