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

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>

That style="display:none" would prevent it from rendering, thus you get a blank page.

That said, i think you're using quite old templates, cause sprintf.js and base64.js were removed something like three years ago. You should just need to include one of the files available on the dist folder.

https://github.com/MrRio/jsPDF/tree/master/dist

Here you have a working fromHTML table example using the latest version: http://jsfiddle.net/dGLmr/7/

来源：https://stackoverflow.com/questions/23540022/export-whole-html-page-to-pdf-using-jspdf-generation

标签

javascript

jquery

ajax

pdf

jspdf