javascriptjqueryajaxpdfjspdf

Export whole html page to pdf using JSPdf generation

I have already added these js files to my aspx page. But I still couldn't get pdf file of my table data. The generated pdf is blank. I need all table data into that generated pdf. Does anyone 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>
        </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>

// 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');
Solution

  • 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>