答案 0 :(得分:6)
在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) {
positions.push({x: cell.x, y: cell.y + 5});
}
},
columnStyles: {
5: {columnWidth: 120}
},
bodyStyles: {
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, {
startY: pos.y,
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>