使用html2canvas和jsPDF渲染HTML + CSS内容不起作用

时间:2019-05-09 09:37:10

标签: javascript jquery html jspdf html2canvas

我正在尝试使用html2canvas脚本用CSS渲染我的网页并将其保存为PDF。但是单击链接下载为pdf并不会触发任何操作。这是我的代码:-

<html>
    <head>
    </head>
    <body>
        <div id="editor"></div>

        <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
        <script type="text/javascript" src="js/html2canvas.js"></script>
        <script type="text/javascript" language="javascript" src="js/jquery.js">
        </script>
        <script type="text/javascript" language="javascript" src="js/html2canvas.min.js">
        </script>
        <script type="text/javascript" language="javascript" src="js/jquery.plugin.html2canvas.js">
        </script>
        <script type="text/javascript">
            function genPDF()
            {
                html2canvas(document.body, {
                    onrendered: function (canvas) {

                        var img = canvas.toDataURL("image/png");
                        var doc = new jsPDF();
                        doc.addImage(img, 'JPEG', 20, 20);
                        doc.save('test.pdf');
                    }

                });

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

            <p>a pararaph</p>

        </div>
        <a href="javascript:genPDF()">Download PDF</a>
    </body>
</html>

您能帮我弄清楚这里出什么问题吗?

0 个答案:

没有答案