如何在使用 JSPDF 从 html 页面创建的 PDF 文件中创建多页答案

【问题标题】：How to create Multi-pages in PDF file created with JSPDF from a html page如何在使用 JSPDF 从 html 页面创建的 PDF 文件中创建多页
【发布时间】：2020-08-31 21:49:17
【问题描述】：

我有一个 html 页面，其中包含许多表格中的文本。单击“生成 pdf”按钮时，我使用 jspdf 1.5 及更高版本以及 html2canvas 库来创建 pdf。

pdf 已正确生成。

这是我的代码：

<!DOCTYPE html>
<html>

    <head> 
            <meta charset="utf-8"> 
            <title>Template 01</title>      
            <link id="BootstrapCSS" rel="stylesheet" type="text/css" href="bootstrap.min.css">      

    </head>

    <body id="toPDF">

            <div id="result">
                <div id="target">
                    <div class="container-fluid">           
                        <p id="generateButton" style="display: none;"><button type="button" class="btn btn-primary btn-lg" onclick="download()">Generate PDF</button></p>
                        <div id="content">
                            <table id="table01" class="table table-bordered table_border">                      
                                ...
                            </table>
                            <table id="table02" class="table table-bordered table_border">                      
                                ...
                            </table>
                            
                            ...
                        </div>
                    </div>
                </div>
            </div>

    </body>

    <script src="jspdf.umd.js"></script>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="html2canvas.min.js"></script>
    <script>
        function download() {
            let pdf = new jspdf.jsPDF('p', 'pt', 'a4')
            let srcwidth = document.getElementById('toPDF').scrollWidth;

            pdf.html(document.getElementById('toPDF'), {
                html2canvas: {
                    scale: 595.26 / srcwidth, //595.26 is the width of A4
                    scrollY: 0
                },
                filename: 'jspdf',
                x: 0,
                y: 0,
                callback: function () {
                    window.open(pdf.output('bloburl'));
                }
            });
        }
    </script>

</html>

以及 jsfiddle 代码：http://jsfiddle.net/amadese57/17npbu4y

我的问题是表格有时会在页面底部（以及下一页顶部）损坏。当表格不能完全在页面上时，我想自动创建一个中断。

我不知道该怎么做，我是否可以在我使用的函数 pdf.html() 中做到这一点。

你能帮我解决这个问题吗？

提前感谢您的帮助

【问题讨论】：

标签： html pdf jspdf html2canvas

【解决方案1】：

您已经添加了 PDF 文件的宽度，请尝试添加 PDF 文件的高度。并在元数据中添加更多信息

【讨论】：

可以提供sn-p吗？