gpt4 book ai didi

jquery - 如何使用Jspdf将Html Tables数据导出为PDF

转载 作者:技术小花猫 更新时间:2023-10-29 11:58:39 25 4
gpt4 key购买 nike

如何将 HTML 页面中的表格导出为 PDF。我已经完成了一些示例数据,但我无法将 HTML 表格列表加载到 PDF 中,请任何人帮助我将表格加载到 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/

最佳答案

一个不错的选择是 AutoTable(a Table plugin for jsPDF) ,它包括主题、rowspan、colspan、从 html 中提取数据、与 json 一起使用,您还可以个性化您的标题并使它们水平显示。 Here是一个演示。

enter image description here

关于jquery - 如何使用Jspdf将Html Tables数据导出为PDF,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19807870/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com