Я использую jsPDF и html2canvas для создания PDF из отчета. Дело в том, что он печатает только то, что вижу на экране. Если я сильно уменьшу масштаб (пока не отобразится весь контент), он показывает весь контент, который мне нужен, но очень маленький.
Я прочитал по крайней мере 15 сообщений о подобных ситуациях, однако не смог приехать к решению этой проблемы.
JS
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");
});
HTML
<!-- 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 -->
Спасибо.