使用JSPdf生成将整个html页面导出为pdf [英] Export whole html page to pdf using JSPdf generation
本文介绍了使用JSPdf生成将整个html页面导出为pdf的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经将这些js文件添加到我的aspx页面中.但是我仍然无法获取表数据的pdf文件.生成的pdf是空白的.我需要生成的pdf的所有表格数据.如果有人知道该怎么做?
I have already added these js file to my aspx page. But i still couldn't able to get pdf file of my table data. the generated pdf is blank.i need all table data to that generated pdf .please if any one know how to do this?
<script src="../Script/jspdf.js"></script>
<script src="../Script/FileSaver.js"></script>
<script src="../Script/Blob.js"></script>
<script src="../Script/BlobBuilder.js"></script>
<script src="../Script/deflate.js"></script>
<script src="../Script/adler32cs.js"></script>
<script src="../Script/jspdf.plugin.addhtml.js"></script>
<script src="../Script/jspdf.plugin.from_html.js"></script>
<script src="../Script/jspdf.plugin.split_text_to_size.js"></script>
<script src="../Script/jspdf.plugin.standard_fonts_metrics.js"></script>
<script src="../Script/base64.js"></script>
<script src="../Script/sprintf.js"></script>
//这是我的aspx表或div内容:
// Here is my aspx table or div content:
<div id="divReport" style="display: none">
<input type="button" id="btnSavePdf" value="Save as Pdf" />
<table id="example">
<tr id="trProject">
<td><span>Project :</span></td>
<td><span id="spanProject" runat="server"></span></td>
</tr>
<tr>
<td><span>Total Number of Employee :</span></td>
<td>
<asp:Label ID="spanTotalEmp" runat="server" EnableViewState="false" ClientIDMode="Static" ></asp:Label>
</td>
</tr>
<tr>
<td><span>Total Number of Hours :</span></td>
<td>
<asp:Label ID="spanTotalHours" runat="server" name="_name2" EnableViewState="false" ClientIDMode="Static" ></asp:Label>
</td>
</tr>
</table>
</div>
//以下是我的Javascript按钮onclick代码:
// Below is my Javascript button onclick code:
$('#btnSavePdf').click(function () {
var doc = new jsPDF('p', 'in', 'letter');
var source = $('#divReport').html();
var specialElementHandlers = {
'#bypassme': function (element, renderer) {
return true;
}
};
doc.fromHTML(
source, // HTML string or DOM elem ref.
0.5, // x coord
0.5, // y coord
{
'width': 7.5, // max width of content on PDF
'elementHandlers': specialElementHandlers
});
doc.output('dataurl');
推荐答案
我假设您只想呈现表而不是整个页面.您可以使用 HTML表导出jQuery插件完成.这就是您的HTML外观:
I assume you want to render the table only instead of the entire page. You can do this using the HTML table export jQuery plugin. This is what your HTML would look like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- jQuery 2.0.2 -->
<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="application/javascript" src="tableExport.js"></script>
<script type="application/javascript" src="jquery.base64.js"></script>
<script type="application/javascript" src="jspdf/libs/sprintf.js"></script>
<script type="application/javascript" src="jspdf/jspdf.js"></script>
<script type="application/javascript" src="jspdf/libs/base64.js"></script>
</head>
<body>
<table id="example">
<!-- rows here -->
</table>
<a href="#" onclick ="$('#example').tableExport({type:'pdf',escape:'false'});">As PDF</a>
</body>
</html>
这篇关于使用JSPdf生成将整个html页面导出为pdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
