added pagination and qr code

This commit is contained in:
Luis Aleixo 2021-08-19 14:26:58 +02:00
parent 087864dbfb
commit 0f7d3b106c
3 changed files with 14 additions and 11 deletions

View file

@ -147,6 +147,9 @@ p.notes {
#link_reproduce_results {
display: none!important;
}
#pdf-qr-code {
visibility: inherit!important;
}
}

View file

@ -15,13 +15,12 @@ function execute_me() {
pagebreak: { mode: '', avoid: '.break-avoid' },
};
html2pdf().set(opt).from(pdf_version).toPdf().get('pdf').then(function(pdf) {
var totalPages = pdf.internal.getNumberOfPages();
for (i = 1; i <= totalPages; i++) {
pdf.setPage(i);
pdf.setFontSize(10);
pdf.setTextColor(150);
pdf.text('Page ' + i + ' of ' + totalPages, (pdf.internal.pageSize.getWidth() / 2.25), (pdf.internal.pageSize.getHeight() - 10));
}
})
.save();
var totalPages = pdf.internal.getNumberOfPages();
for (i = 1; i <= totalPages; i++) {
pdf.setPage(i);
pdf.setFontSize(10);
pdf.setTextColor(150);
pdf.text('Page ' + i + ' of ' + totalPages, (pdf.internal.pageSize.getWidth() / 2.25), (pdf.internal.pageSize.getHeight() - 10));
}
}).save();
};

View file

@ -18,11 +18,12 @@
<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">
<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>
<p style="margin-bottom: 0"> Created {{ creation_date }} using CARA calculator version v{{ form.calculator_version }}</p>
</div>
<button type="button" class="btn btn-outline-dark align-self-center print-button" id="download-pdf" onclick="execute_me()">Download PDF</button>
<button type="button" class="btn btn-outline-dark align-self-center" style="margin-right: -100pt" id="download-pdf" onclick="execute_me()">Download PDF</button>
<a href="{{ qr_code.link }}" id="pdf-qr-code" class="align-self-center" style="margin-right: 1%; visibility: hidden"><img style="width:100pt;" id="qr_code" src="{{ qr_code.image }}"/></a>
</div>
{% endblock report_header %}