将网页导出为pdf文件

时间:2014-01-16 06:16:26

标签: javascript html pdf-generation jspdf

当用户点击按钮时,我试图将网页(不是整页,但页面的某些部分)导出到pdf file

但以下代码对我不起作用。任何人都可以在我出错的地方帮助我。我使用jsPDF将网页导出到pdf

 <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="js/jspdf.js"></script>
        <script type="text/javascript" src="libs/Deflate/adler32cs.js"></script>
        <script type="text/javascript" src="libs/FileSaver.js/FileSaver.js"></script>
        <script type="text/javascript" src="libs/Blob.js/BlobBuilder.js"></script>
        <script type="text/javascript" src="jspdf.plugin.addimage.js"></script>
        <script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script>
        <script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>
        <script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
        <script>
            $(function() {
                var doc = new jsPDF();
                var specialElementHandlers = {
                    '#editor': function(element, renderer) {
                        return true;
                    }
                };

                $('#cmd').click(function() {
                    doc.fromHTML($('#content').html(), 15, 15, {
                        'width': 170,
                        'elementHandlers': specialElementHandlers
                    });
                    doc.save('sample-file.pdf');
                });
            });

        </script>
    </head>
    <body>
        <div id="content">
            <h3>Hello, this is a H3 tag</h3>

            <p>a pararaph</p>
        </div>
        <div id="editor"></div>
        <button id="cmd">generate PDF</button>
    </body>

 </html>

1 个答案:

答案 0 :(得分:0)

点击这里的小提琴:

Fiddle

您的代码是否来自某些教程。

$(function () {
    var doc = new jsPDF();
    var specialElementHandlers = {
        '#editor': function (element, renderer) {
            return true;
        }
    };

    $('#cmd').click(function () {
        doc.fromHTML($('#content').html(), 15, 15, {
            'width': 170,
                'elementHandlers': specialElementHandlers
        });
        doc.save('sample-file.pdf');
    });
});

我在Mozilla firefox上尝试过,你的代码运行正常。您正在检查哪个浏览器导致我无法使用Google Chrome。