在javascript中将当前页面导出为pdf

时间:2017-08-21 05:28:46

标签: javascript html pdf

我想将当前网页导出为pdf,我使用JSPDF

进行如下操作
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"> </script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

        <script type="text/javascript">

            function getPDF()
            {

                html2canvas(document.body,{

                    onrendered: function(canvas)
                    {
                    var img = canvas.toDataURL("image/png");
                    var doc = new jsPDF();
                    var width = doc.internal.pageSize.width;    
                    var height = doc.internal.pageSize.height;


                    doc.setFont("helvetica");
                    doc.setFontType("bold");
                    doc.setFontSize(9);


                    alert(width)
                    alert(height)
                  //  pdf.addImage(img, 'JPEG', 0, 0,width,height);
                doc.addImage(img, 'JPEG', 0, 0,width,height);
                    doc.save("test.pdf");
                    }
                }

                );
            }


        </script>

    </head>

    <body>

        <div id="dv" style="margin-top:120px">
        <span style="float:right">

            <input type="button" name="btn" id="btn" value="Download-pdf" onclick="getPDF();"/>
        </span><br><br>
        <table width="100%" border='1' style="text-align:center;border-collapse:collapse">

        <thead>
                <tr>

                    <th> Row ddddd </th>
                    <th> Row ddddd </th>
                    <th> Row ddddd </th>
                    <th> Row ddddd </th>
                    <th> Row ddddd </th>
                    <th> Row ddddd </th><th> Row ddddd </th><th> Row ddddd </th>


                </tr>
        </thead>
        <tbody>

            <tr>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>

            </tr>
            <tr>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>

            </tr><tr>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>

            </tr><tr>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>

            </tr><tr>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>

            </tr><tr>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>

            </tr><tr>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>

            </tr><tr>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>

            </tr><tr>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>

            </tr><tr>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>

            </tr><tr>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>

            </tr><tr>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>

            </tr><tr>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>

            </tr><tr>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>

            </tr><tr>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>

            </tr><tr>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>

            </tr><tr>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>

            </tr><tr>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>

            </tr><tr>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>
            <td> Row ddddd </td><td> Row ddddd </td>

            </tr>
        </tbody>
        </table>

        </div>
    </body>

,浏览器将页面显示为 enter image description here

我将在pdf中获得相同的页面 enter image description here

pdf是一些不同于原始的..我需要得到一个确切的,请提出任何建议,以提高PDF的质量,并提前感谢。

1 个答案:

答案 0 :(得分:0)

更改getPDF以获得更好的PDF格式。见addHTML source code

function getPDF() {
    var doc = new jsPDF();
    doc.addHTML(document.body, function() {
        doc.save('test.pdf')
    })
}