vivek vivek - 1 year ago 525
jQuery Question

Export whole html page to pdf using JSPdf generation

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>

// 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>
<td><span>Total Number of Employee :</span></td>
<asp:Label ID="spanTotalEmp" runat="server" EnableViewState="false" ClientIDMode="Static" ></asp:Label>
<td><span>Total Number of Hours :</span></td>

<asp:Label ID="spanTotalHours" runat="server" name="_name2" EnableViewState="false" ClientIDMode="Static" ></asp:Label>


// 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;

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


Answer Source

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" "">
<html xmlns="">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <!-- jQuery 2.0.2 -->
    <script type="application/javascript" src=""></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>

<table id="example">
   <!-- rows here -->
<a href="#" onclick ="$('#example').tableExport({type:'pdf',escape:'false'});">As PDF</a>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download