如何使用Jspdf将Html Tables数据导出为PDF
Nav*_*yah 22 html jquery jspdf
如何将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>
Osc*_*edo 15
一个很好的选择是AutoTable(jsPDF的表插件),它包括主题,rowspan,colspan,从html提取数据,与json一起使用,你也可以个性化你的标题并使它们成为横向.这是一个演示.
这是一个我认为可以帮助你的例子
<!DOCTYPE html>
<html>
<head>
<script src="js/min.js"></script>
<script src="js/pdf.js"></script>
<script>
$(function(){
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#cmd').click(function () {
var table = tableToJson($('#StudentInfoListTable').get(0))
var doc = new jsPDF('p','pt', 'a4', true);
doc.cellInitialize();
$.each(table, function (i, row){
console.debug(row);
$.each(row, function (j, cell){
doc.cell(10, 50,120, 50, cell, i); // 2nd parameter=top margin,1st=left margin 3rd=row cell width 4th=Row height
})
})
doc.save('sample-file.pdf');
});
function tableToJson(table) {
var data = [];
// first row needs to be headers
var headers = [];
for (var i=0; i<table.rows[0].cells.length; i++) {
headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,'');
}
// go through cells
for (var i=0; i<table.rows.length; i++) {
var tableRow = table.rows[i];
var rowData = {};
for (var j=0; j<tableRow.cells.length; j++) {
rowData[ headers[j] ] = tableRow.cells[j].innerHTML;
}
data.push(rowData);
}
return data;
}
});
</script>
</head>
<body>
<div id="table">
<table id="StudentInfoListTable">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Track</th>
<th>S.S.C Roll</th>
<th>S.S.C Division</th>
<th>H.S.C Roll</th>
<th>H.S.C Division</th>
<th>District</th>
</tr>
</thead>
<tbody>
<tr>
<td>alimon </td>
<td>Email</td>
<td>1</td>
<td>2222</td>
<td>as</td>
<td>3333</td>
<td>dd</td>
<td>33</td>
</tr>
</tbody>
</table>
<button id="cmd">Submit</button>
</body>
</html>
这里输出
小智 5
不幸的是，这是不可能的。
jsPDF不支持以fromHTML方法导出图像和表格。在jsPDF v0.9.0 rc2中
- 是的，答案是“ true”，但是回答这个问题不是正确的。OP正在寻求帮助以导出到pdf，并已尝试。 (5认同)
| 归档时间： |
|
| 查看次数： |
122080 次 |
| 最近记录： |