jsPDF+；html2canvas仅打印屏幕内容（将可滚动内容保留为空白）

我正在使用jsPDF和html2canvas从报告生成PDF。问题是它只打印我在屏幕上看到的内容。如果我缩小很多（直到所有内容都显示出来），它会显示我需要的所有内容，但非常小

我读过至少15篇关于类似情况的帖子,但都没能找到解决这个问题的办法

JS

函数CreatePDFfromHTML（）{
var HTML_Width=$（“#modalReport”）.Width（）；
var HTML_Height=$（“#modalReport”）.Height（）；
var上下边缘=15；
var PDF_Width=HTML_Width+（左上角距*2）；
变量PDF_高度=（PDF_宽度*1.5）+（左上角距*2）；
var canvas_image_width=HTML_width；
var canvas_image_height=HTML_height；
var totalPDFPages=Math.ceil（HTML\u Height/PDF\u Height）-1；
html2canvas（$（“#modalReport”）[0]）。然后（函数（画布）{
var imgData=canvas.toDataURL（“image/jpeg”，1.0）；
var pdf=新的jsPDF（'p'，'pt'，[pdf_宽度，pdf_高度]）；
pdf.addImage（imgData，'JPG'，左上角，左上角，画布图像宽度，画布图像高度）；
对于（var i=1；i
你有没有想过？你有没有想过？
    function CreatePDFfromHTML() {
var HTML_Width = $("#modalReport").width();
var HTML_Height = $("#modalReport").height();
var top_left_margin = 15;
var PDF_Width = HTML_Width + (top_left_margin * 2);
var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
var canvas_image_width = HTML_Width;
var canvas_image_height = HTML_Height;

var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;

html2canvas($("#modalReport")[0]).then(function (canvas) {
    var imgData = canvas.toDataURL("image/jpeg", 1.0);
    var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
    pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
    for (var i = 1; i <= totalPDFPages; i++) { 
        pdf.addPage(PDF_Width, PDF_Height);
        pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
    }
    pdf.save("Your_PDF_Name.pdf");
});

 <!-- Modal with report -->
<div id="modalReport" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content" style="border-radius: 0px;">
        <div class="modal-header">
          <h5 class="modal-title vertical-align-by-margin" id="exampleModalLabel">Data range: 2019/12/03 - 2019/12/03</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          </button>
        </div>
        <div class="modal-body">
            <div class="upper-block d-flex justify-content-between vertical-align-by-margin">
                <h1 class="bot-title" id="bot-title">
                    Activity for bot name
                </h1>
                <button type="button" class="btn btn-download d-right" onclick="CreatePDFfromHTML();">Download as PDF</button>
            </div>
            <div class="summary-initial-text">
                <p>Here is a summary of what happened with your Sorcero instance over the past week.</p>
                <p>Current Access: <b>5</b> users, <b>4</b> admins, <b>3</b> SMEs. </p>
                <p>There are <b>107</b> open issues. </p>
                <p>There were <b>484</b> questions answered successfully. <b>84</b> of those questions required SME intervention.</p>
            </div>
            <div class="summary-initial-text col-12 d-flex justify-content-between vertical-align-by-margin" style="background-color: #F8F8FA">
                    <!-- <div style="height:500px; width:500px;">
                    <canvas id="myChart"></canvas>
                </div> -->
                <div class="item smesResolvedQ col-6" style="padding: 0px;">
                    <h2 id="smesResolvedQporcentage" style="color:#f2444a"></h2>
                    <svg style="margin-left:auto; margin-right:auto; display:flex; width:160; height:160" xmlns="http://www.w3.org/2000/svg">
                     <g>
                      <title>smesResolvedQ</title>
                      <circle r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#F8E0E1" fill="none"/>
                      <circle class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#F2444A" fill="none"/>
                     </g>
                    </svg>
                    <p class="text-center" style="margin:0px;">Questions resolved</p>
                </div>

                <div class="item autoResolvedQ col-6" style="padding: 0px;">
                    <h2 id="autoResolvedQporcentage" style="color: #22bf6f"></h2>
                    <svg style="margin-left:auto; margin-right:auto; display:flex; width:160; height:160" xmlns="http://www.w3.org/2000/svg">
                     <g>
                      <title>autoResolvedQ</title>
                      <circle r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#DEF7EA" fill="none"/>
                      <circle class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#22BF6F" fill="none"/>
                     </g>
                    </svg>
                    <p class="text-center" style="margin:0px;">Automatically resolved</p>
                </div>
            </div>
            <div class="summary-initial-text">
                <p>In the past week, the average time to resolve an issue was <b>16 days</b> and the maximum time to resolve an issue was <b>80 days</b>.</p>
                <p>Over the past year, the average time to resolve an issue was <b>16 days</b> and the maximum time to resolve an issue was <b>80 days</b>.</p>
            </div>
            <div class="summary-initial-text col-12  vertical-align-by-margin" style="background-color: #F8F8FA; margin-bottom:20px">
                <table id="overview-table" class="table col-12 table-borderless">
                    <thead>
                      <tr class="text-center">
                        <th class="text-left">Overview</th>
                        <th class="text-right">Total</th>
                        <th class="text-right">Difference</th>
                      </tr>
                    </thead>
                    <tbody>
                    {% for data in overview_table %}
                      <tr>
                      <td class="text-left">{{data.overview}}</td>
                      <td class="text-right">{{data.total}}</td>
                      <td class="text-right">{{data.difference}}</td>
                    </tr>
                    {% endfor %}
                    </tbody>
                  </table>
            </div>
            <div class="summary-initial-text col-12  vertical-align-by-margin" style="background-color: #F8F8FA; margin-bottom:20px">
                <table id="open-issues-table" class="table col-12 table-borderless">
                    <thead>
                      <tr>
                        <th class="text-left">Open Issues</th>
                        <th class="text-right">Total</th>
                        <th class="text-right">Difference</th>
                      </tr>
                    </thead>

                    <tbody>
                      {% for data in open_issues %}
                      <tr>
                      <td class="text-left">{{data.openIssues}}</td>
                      <td class="text-right">{{data.total}}</td>
                      <td class="text-right">{{data.difference}}</td>
                    </tr>
                    {% endfor %}
                    </tbody>
                  </table>
            </div>
            <div class="summary-initial-text col-12  vertical-align-by-margin" style="background-color: #F8F8FA; margin-bottom:20px">
                <table id="resolved-issues-table" class="table table-borderless col-12">
                    <thead>
                      <tr class="text-center">
                        <th class="text-left">Resolved issues</th>
                        <th class="text-right">Total</th>
                        <th class="text-right">Difference</th>
                      </tr>
                    </thead>
                    <tbody>
                    {% for data in resolved_issues %}
                      <tr>
                      <td class="text-left">{{data.resolvedIssues}}</td>
                      <td class="text-right">{{data.total}}</td>
                      <td class="text-right">{{data.difference}}</td>
                    </tr>
                    {% endfor %}
                    </tbody>
                  </table>
            </div>
        </div>
      </div>
    </div>
  </div>
<!-- end Modal with report -->