pingu_98/cara
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Set first page break dynamically

Browse source
This commit is contained in:
Luis Aleixo 2021-08-23 10:32:57 +02:00
parent 9ca6036036
commit 63c2ef5f82
3 changed files with 13 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
cara/apps/calculator/static/css/report.css
View file

@ -99,15 +99,12 @@ p.notes {
}
@media (width: 1200px) {
/* CSS styling for break avoid. */
/* CSS styling to avoid page breaks. */
.break-avoid {
page-break-inside: avoid;
}
.first_page {
height: 380pt;
}
.second_page {
height: 540pt;
height: 530pt;
}
.third_page {
height: 90pt;

10
cara/apps/calculator/static/js/pdf.js
View file

@ -1,8 +1,12 @@
function execute_me(qr_link) {
const pdf_version = this.document.getElementById("body");
console.log(pdf_version);
console.log(window);
// Set height of first page break according to the results div
const header_height = this.document.getElementById("report-header-div").offsetHeight;
const results_height = this.document.getElementById("results-div").offsetHeight;
this.document.getElementById("break-first-page").style.height = (1420 - header_height - results_height) + 'pt';
// PDF styling
var opt = {
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
@ -18,7 +22,7 @@ function execute_me(qr_link) {
html2pdf().set(opt).from(pdf_version).toPdf().get('pdf').then(function(pdf) {
var totalPages = pdf.internal.getNumberOfPages();
pdf.setPage(1);
pdf.link(530, 25, 60, 60, { url: qr_link });
pdf.link(530, 25, 60, 60, { url: qr_link }); //Hyperlink to reproduce results
for (i = 1; i <= totalPages; i++) {
pdf.setPage(i);

8
cara/apps/calculator/templates/base/calculator.report.html.j2
View file

@ -16,7 +16,7 @@
{% block report_header %}
<div class="d-flex flex-row">
<div id="report-header-div" class="d-flex flex-row">
<img src="/static/images/cara_logo.200x200.png" style="height:150px; display:inline-block; vertical-align:middle; margin: 1%">
<div class="d-flex align-self-center flex-column" style="margin-left: 1em; margin-right: auto">
<h2 class="text-component-title" style="margin-bottom: 0">CARA - CALCULATOR REPORT</h1>
@ -45,7 +45,7 @@
<div class="tab-pane show active" id="results" role="tabpanel" aria-labelledby="results-tab" style="padding: 1%">
{% block report_results %}
<div class="card bg-light mb-3">
<div class="card bg-light mb-3" id="results-div">
<div class="card-header"><strong>Results </strong>
<button class="icon_button p-0 float-right" data-toggle="collapse" href="#collapseResults" role="button" aria-expanded="true" aria-controls="collapseResults">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-expand" viewBox="0 0 16 16">
@ -88,8 +88,8 @@
</div>
</div>
</div>
<div class="break-avoid first_page"></div>
<div class="card bg-light mb-3">
<div class="break-avoid" id="break-first-page"></div>
<div class="card bg-light mb-3" id="alternative-scenarios-div">
<div class="card-header"><strong>Alternative scenarios</strong>
<button class="icon_button p-0 float-right" data-toggle="collapse" href="#collapseAlternativeScenarios" role="button" aria-expanded="false" aria-controls="collapseAlternativeScenarios">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-expand" viewBox="0 0 16 16">