jsPDF 只生成空的pdf答案

【问题标题】：jsPDF generates empty pdf onlyjsPDF 只生成空的pdf
【发布时间】：2025-12-11 04:25:01
【问题描述】：

我正在使用 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 * 问题中获取了一些代码）

【问题讨论】：

您是否在控制台中收到任何错误输出？
@Tanner 我在使用“html2canvas”之前遇到了一个错误，所以我添加了它。现在我可以下载它，但只有空内容

标签： javascript html jspdf

【解决方案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>

希望以上代码对你有用。

谢谢。

【讨论】：

感谢您的意见！这里的问题是，当您使用“text”而不是“html”时，我失去了所有的 html 样式。
我想保留 h1/h2/bold 的样式以及 css 的样式
需要一个fromHtml的回调函数

【解决方案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>

【讨论】：