page numbers

cara/apps/calculator/static/css/report.css

@@ -116,6 +116,8 @@ p.notes {
     #rules,
     #data {
         display: inline!important;
+        break-inside: avoid;
+        page-break-inside: avoid;
     }
     .tab-content {
         border-top: none!important;

cara/apps/calculator/static/js/pdf.js

@@ -6,12 +6,22 @@ function execute_me() {
     var opt = {
         filename: 'myfile.pdf',
         image: { type: 'jpeg', quality: 0.9 },
-        html2canvas: { scale: 2, width: 1200, windowWidth: 1200 },
+        html2canvas: { scale: 2, logging: true, dpi: 192, letterRendering: true, width: 1200, windowWidth: 1200 },
         jsPDF: {
+            unit: 'mm',
             format: 'a4',
             orientation: 'portrait'
         },
-        pagebreak: { after: '.page-break' }
+        pagebreak: { mode: 'avoid-all', after: ['#rules', '#results'] }
     };
-    const pdf = html2pdf().set(opt).from(pdf_version).outputImg().save();
+    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() - 8)));
+            }
+        })
+        .save();
 };

cara/apps/calculator/templates/base/calculator.report.html.j2

@@ -24,10 +24,10 @@
 		</div>
 		<button type="button" class="btn btn-outline-dark align-self-center print-button" id="download-pdf" onclick="execute_me()">Download PDF</button>
 	</div>
+	<div class="html2pdf__page-break"></div>
 
 {% endblock report_header %}
 
-
 <div class="tabs-div">
 	<ul class="nav nav-tabs"role="tablist" style="margin: 0.5% 0% 0% 1%">
 		<li class="nav-item">

cara/apps/calculator/themes/cern/templates/calculator.report.html.j2

@@ -106,7 +106,6 @@
 {% endblock report_scenarios_summary_table %}
 
 {% block report_preamble %}
-<br class="card_break">
 <div class="tab-pane fade show active" id="rules" role="tabpanel" aria-labelledby="rules-tab" style="padding: 1%">
   <div class="card bg-light mb-3">
     <div class="card-header"><strong>Applicable rules </strong>