我有一个带有rowspan / colspan的HTML表。如何使用JSPDF-Autotable /或任何其他导出到pdf插件将此表导出为pdf? 我想创建一个按钮,当单击时,将整个表导出为可下载的pdf,其中rowspan和colspan在pdf中创建的表中可见。 我的桌子是
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title id='title'>HTML Page setup Tutorial</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="https://rawgit.com/someatoms/jsPDF-AutoTable/master/dist/jspdf.plugin.autotable.js"></script>
<script type="text/javascript">
function myFunction()
{
var doc = new jsPDF('p', 'pt');
var res = doc.autoTableHtmlToJson(document.getElementById("my-table"));
doc.autoTable(res.columns, res.data, {startY: 40});
doc.save("Report.pdf");
}
</script>
</head>
<body>
<table border='1' id="my-table">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan='2'>D</td>
<td colspan='2'>$100</td>
</tr>
<tr>
<td >E</td>
<td >F</td>
</tr>
</tbody>
</table>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
答案 0 :(得分:1)
为您的表添加Id
,在<thead>
中包含标题,在<tbody>
中包含内容。
<table id="my-table">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
</tbody>
</table>
然后在JS中使用autoTableHtmlToJson()
方法从表中获取JSON数据。
var doc = new jsPDF('p', 'pt');
var res = doc.autoTableHtmlToJson(document.getElementById("my-table"));
doc.autoTable(res.columns, res.data, {startY: 40});