如何使用Jspdf将Html Tables数据导出为PDF [英] How to export the Html Tables data into PDF using Jspdf
本文介绍了如何使用Jspdf将Html Tables数据导出为PDF的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何将HTML页面中的表格导出为PDF。我已经做了一些示例数据，但我无法将HTML表格列表加载到PDF中，请任何人都可以帮助我将表格加载到PDF中。
<！DOCTYPE html>
< html lang =en>
< head>
< title> html2canvas示例< / title>
< script type =text / javascriptsrc =js / jquery / jquery-1.7.1.min.js>< / script>
< script type =text / javascriptsrc =js / jspdf.js>< / script>
< script type =text / javascriptsrc =libs / FileSaver.js / FileSaver.js>< / script>
< script type =text / javascriptsrc =js / jspdf.plugin.standard_fonts_metrics.js>< / script>
< script type =text / javascriptsrc =js / jspdf.plugin.split_text_to_size.js>< / script>
< script type =text / javascriptsrc =js / jspdf.plugin.from_html.js>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
var specialElementHandlers = {
'#editor'：function（element，renderer）{return true;}
};
$ b $（'＃cmd'）。click（function（）{
var doc = new jsPDF（）;
doc.fromHTML（$（'＃target '）.html（），15,15，{
'width'：170，'elementHandlers'：specialElementHandlers
}）;
doc.save（'sample-file .pdf'）;
}）;
}）;
< / script>
< / head>
< body id =target>
< div id =content>
< h3>您好，这是一个H3标签< / h3>
< a class =upload>上传到Imgur< / a>
< h2>这是< b>粗体< / b> < span style =color：red>红色< / span>< / h2>
< table border =1>
< tr>
< th>头1< />
< th>头2< / th>
< / tr>
< tr>
< td>第1行，第1单元< / td>
< td>第1行，第2单元< / td>
< / tr>
< tr>
< td>第2行，第1单元< / td>
< td>第2行，第2单元< / td>
< / tr>
< / table>
< / div>
< button id =cmd>生成PDF< / button>
< / body>
< / html>
How do I export the tables in HTML page to PDF. I have done some sample data but I am unable to load the HTML table list into PDF, Please can any one help me in loading the Tables into PDF.
<!DOCTYPE html>
<html lang="en">
<head>
<title>html2canvas example</title>
<script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jspdf.js"></script>
<script type="text/javascript" src="libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="js/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="js/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="js/jspdf.plugin.from_html.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var specialElementHandlers = {
'#editor': function(element, renderer) { return true; }
};
$('#cmd').click(function() {
var doc = new jsPDF();
doc.fromHTML($('#target').html(), 15, 15, {
'width': 170,'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
});
</script>
</head>
<body id="target">
<div id="content">
<h3>Hello, this is a H3 tag</h3>
<a class="upload">Upload to Imgur</a>
<h2>this is <b>bold</b> <span style="color:red">red</span></h2>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</div>
<button id="cmd">generate PDF</button>
</body>
</html>
http://jsfiddle.net/y2b7Q/327/
解决方案
A good option is AutoTable(a Table plugin for jsPDF), it includes themes, rowspan, colspan, extract data from html, works with json, you can also personalize your headers and make them horizontals. Here is a demo.
这篇关于如何使用Jspdf将Html Tables数据导出为PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
