首先看需求,页面上会渲染出一个表格,可以预览为pdf、并且导出为pdf:
当点击预览pdf
按钮,则在iframe
的地方预览:
点击导出pdf
按钮,则导出这个table为pdf:
实现过程:
首先看看官网API,这个库可以将table
导出为很多形式:
我主要说的是导出为pdf格式,要看看它的分支jsPDF-AutoTable的API介绍,用法和配置项很详细,主要看examples
文件夹里面的示例:
// html 样式就不写了,自行修改
<button id="download-btn" class="pure-button">导出 PDF</button>
<button id="preiew-btn" class="pure-button">预览pdf</button>
<!-- 预览区 注意加上宽高尺寸, 你可以开始隐藏它,点击预览再显示 -->
<div id="wrapper">
<iframe id="output"></iframe>
</div>
<!-- table -->
<table id="basic-table" border="1">
<thead>
<tr>
<th>ID</th>
<th>First name</th>
<th>Last name</th>
<th>Email</th>
<th>Country</th>
<th>IP-address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Donna</td>
<td>Moore</td>
<td>dmoore0@furl.net</td>
<td>China</td>
<td>211.56.242.221</td>
</tr>
<tr>
<td>2</td>
<td>Janice</td>
<td>Henry</td>
<td>jhenry1@theatlantic.com</td>
<td>Ukraine</td>
<td>38.36.7.199</td>
</tr>
<tr>
<td>3</td>
<td>Ruth</td>
<td>Wells</td>
<td>rwells2@constantcontact.com</td>
<td>Trinidad and Tobago</td>
<td>19.162.133.184</td>
</tr>
<tr>
<td>4</td>
<td>Jason</td>
<td>Ray</td>
<td>jray3@psu.edu</td>
<td>Brazil</td>
<td>10.68.11.42</td>
</tr>
<tr>
<td>5</td>
<td>Jane</td>
<td>Stephens</td>
<td>jstephens4@go.com</td>
<td>United States</td>
<td>47.32.129.71</td>
</tr>
<tr>
<td>6</td>
<td>Adam</td>
<td>Nichols</td>
<td>anichols5@com.com</td>
<td>Canada</td>
<td>18.186.38.37</td>
</tr>
</tbody>
</table>
// js
<script src="libs/jspdf.min.js"></script>
<script src="../dist/jspdf.plugin.autotable.js"></script>
<script>
// 导出pdf
document.getElementById('download-btn').onclick = function () {
update(true);
};
// 预览
document.getElementById('preiew-btn').onclick = function () {
update()
}
function update(shouldDownload) {
shouldDownload = shouldDownload || false; // 预览还是导出
var doc = new jsPDF('p', 'pt'); // 初始化示例,更多配置项看官网api
doc.text("From HTML", 40, 50); // 表title、距离左边距离、距离上边距离
var res = doc.autoTableHtmlToJson(document.getElementById("basic-table")); // 获取当前表格的数据
doc.autoTable(res.columns, res.data, {startY: 60}); // 渲染数据,列、数据、距离上边距离,更多配置项看官网api
if (shouldDownload) {
doc.save('tableName.pdf'); // 导出名为tableName.pdf的文件
} else {
// doc.output('datauristring'):pdf预览的地址,一段base64地址
document.getElementById("output").src = doc.output('datauristring');
}
}
</script>
就酱~