-1

我有一个带有行跨度/列跨度的 HTML 表。如何使用 JSPDF-Autotable/或任何其他导出到 pdf 插件的方式将此表导出为 pdf？我想创建一个按钮，单击该按钮将整个表格导出为可下载的 pdf，其中行跨度和 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>
4

1 回答 1

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});
于 2016-04-08T21:47:09.710 回答