时间戳

首页 > 解决方案 > 使用 html2canvas 和 jsPDF 渲染 HTML+CSS 内容不起作用

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

问题描述

我正在尝试使用 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>

你能帮我弄清楚这里有什么问题吗？

标签： javascriptjqueryhtmljspdfhtml2canvas

解决方案

推荐阅读