Question

我正在与jsPDF一起使用HTML创建PDF。但是，它总是生成一个空页面，与我输入的HTML内容无关。

这是我的代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Save HTML TO PDF</title>



</head>

<body>
        <div><button id="cmd">download as PDF</button></div>

        <div id="content">Hello</div>

        <script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
        <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

        <script type="text/javascript">
            document.getElementById("cmd").addEventListener("click", function () {
                    window.html2canvas = html2canvas;
                    var doc = new jsPDF("p", "pt", "a4");
                    doc.html(document.getElementById("content"), {
                        callback: function(pdf) {
                          pdf.save("cv-a4.pdf");
                        }
                    });
                });

        </script>

</body>

</html>

我在做什么错？我认为这与documentation完全匹配。但是，如上所述，生成的pdf不显示任何内容，也不显示“ Hello”。（我从this StackOverflow问题中提取了一些代码）

Answer 1

@threxx

尝试此代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Save HTML TO PDF</title>
</head>

<body>
        <div><button id="cmd">download as PDF</button></div>

        <div id="content">
            <h1 style="color: brown;">Hello, He/She..</h1>
            <p style="color: green;">How Are you ??</p>
            Thank you.
         </div>

        <script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
        <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

        <script type="text/javascript">
            document.getElementById("cmd").addEventListener("click", function () {

            var doc = new jsPDF("p", "pt", "a4");
            var source = window.document.getElementById('content').innerHTML;
            doc.fromHTML(source, 30, 30);  
            doc.save("cv-a4.pdf");
            });
        </script>
</body>

</html>

我希望以上代码对您有用。

谢谢。

Answer 2

因此，在进行了更多研究之后，我找到了this答案，该答案将从HTML返回PDF。小问题：仍然只有非常差的CSS样式，但afaik jspdf不支持自定义CSS。

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

<script type="text/javascript">
    document.getElementById("cmd").addEventListener("click", function () {

        var doc = new jsPDF("p", "pt", "a4");
        var source = document.body;
        var margin = {
            top: 20,
            left: 20,
            right: 20,
            bottom: 20
        };
        doc.fromHTML(source, 30, 30, {
            'width': 80, // max width of content on PDF
        },
        function(pdf){doc.save('saveInCallback.pdf');},
        margin
        );

    });
</script>

jsPDF仅生成空pdf

2 个答案: