From 89674095b59b4ce4f100f6b9d5bd9db539b3317c Mon Sep 17 00:00:00 2001
From: "LORENZO\\pacio" <paciotti@poloinformatico.it>
Date: Fri, 31 Oct 2025 09:43:31 +0100
Subject: [PATCH] varie css + export nativo da finire

---
 src/App.vue                        | 34 ++++++++------------
 src/assets/print.css               |  7 ++++
 src/components/risultati/B_BAR.vue |  2 +-
 src/components/risultati/B_RET.vue |  2 +-
 src/main.js                        |  1 +
 src/utils/printPdfNative.js        | 51 ++++++++++++++++++++++++++++++
 6 files changed, 75 insertions(+), 22 deletions(-)
 create mode 100644 src/assets/print.css
 create mode 100644 src/utils/printPdfNative.js

diff --git a/src/App.vue b/src/App.vue
index c58fbf9..fb72553 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -87,6 +87,9 @@
 </template>
 
 <script setup>
+import { nextTick } from 'vue';
+import { computed } from 'vue';
+import { printPdfNative } from './utils/printPdfNative.js';
 import { ref, onMounted, watch } from 'vue'
 import html2pdf from 'html2pdf.js'
 import A_CUB from './components/risultati/A_CUB.vue'
@@ -204,26 +207,11 @@ function capitalizeEachWord(str) {
 }
 
 
-/*function exportPdf(filename = 'certificato-prova.pdf') {
-  html2pdf()
-    .from(printable.value)
-    .set({
-  filename,
-  html2canvas: { scale: 2 },
-  jsPDF: {
-        unit: 'mm',
-        format: [210, 297], // A4
-        orientation: 'portrait'
-      }
-  })
-    .save()
-}*/
-
 function exportPdf(filename = 'certificato-prova.pdf') {
   const opt = {
     margin:       0,
     filename,
-    html2canvas:  { scale: 2 },
+    html2canvas:  { scale: 4 },
     jsPDF:        { unit: 'mm', format: [210, 297], orientation: 'portrait' },
     pagebreak:    { mode: ['css','legacy'] }
   };
@@ -252,7 +240,13 @@ function exportPdf(filename = 'certificato-prova.pdf') {
     .save();
 }
 
+async function exportNative(filename = 'certificato-prova.pdf') {
 
+    console.log ('Exporting PDF via native method...');
+    // '#report' is the root of what you want to print
+    printPdfNative(filename.valueOf, { rootSelector: '#report' });
+
+}
 
 function formatDate(dateStr) {
   const date = new Date(dateStr)
@@ -331,8 +325,8 @@ body {
   display: block;
 }
 
+
 .report {
-  /* Assicuriamoci che .report abbia altezza A4 e posizionamento relativo */
   position: relative;
   max-width: 210mm;
   min-height: 289mm;
@@ -388,7 +382,7 @@ td {
 
 .info-table {
   width: 80%;
-  border: 2px solid black;
+  border: 1px solid black;
   margin: 0 auto;
   border-collapse: collapse;
 }
@@ -462,11 +456,11 @@ footer .signatures {
 }
 
 footer .sign1{
-  font-size: 0.75em;
+  font-size: 1em;
 }
 
 footer .sign2{
-  font-size: 0.65em;
+  font-size: 0.9em;
 }
 
 footer .signblock{
diff --git a/src/assets/print.css b/src/assets/print.css
new file mode 100644
index 0000000..45d0bf8
--- /dev/null
+++ b/src/assets/print.css
@@ -0,0 +1,7 @@
+/* Page setup */
+@page {
+  size: A4;
+  margin: 10mm 10mm 15mm 10mm;
+}
+
+
diff --git a/src/components/risultati/B_BAR.vue b/src/components/risultati/B_BAR.vue
index 2a33ee1..0e7927d 100644
--- a/src/components/risultati/B_BAR.vue
+++ b/src/components/risultati/B_BAR.vue
@@ -14,7 +14,7 @@
               <th rowspan="2">Struttura di<br>riferimento</th>
             </tr>
             <tr>
-              <th>N.</th>
+              <th>&nbsp;&nbsp;&nbsp;N.&nbsp;&nbsp;&nbsp;</th>
               <th>Data</th>
               <th>[mm]</th>
               <th>[mm]</th>
diff --git a/src/components/risultati/B_RET.vue b/src/components/risultati/B_RET.vue
index eb2bae2..7dd704b 100644
--- a/src/components/risultati/B_RET.vue
+++ b/src/components/risultati/B_RET.vue
@@ -14,7 +14,7 @@
               <th rowspan="2">Struttura di<br>riferimento</th>
             </tr>
             <tr>
-              <th>N.</th>
+              <th>&nbsp;&nbsp;&nbsp;N.&nbsp;&nbsp;&nbsp;</th>
               <th>Data</th>
               <th>[mm]</th>
               <th>[mm]</th>
diff --git a/src/main.js b/src/main.js
index fe5bae3..0aa686d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import './style.css'
+import './assets/print.css';
 
 createApp(App).mount('#app')
diff --git a/src/utils/printPdfNative.js b/src/utils/printPdfNative.js
new file mode 100644
index 0000000..27c8950
--- /dev/null
+++ b/src/utils/printPdfNative.js
@@ -0,0 +1,51 @@
+// Native print with a custom default filename (no html2pdf).
+// It temporarily sets document.title, opens the print dialog, then restores it.
+export async function printPdfNative(
+  desiredFilename = 'report.pdf',
+  { rootSelector = '#report', printClass = 'printing', preloadImages = true } = {}
+) {
+  const root = document.querySelector(rootSelector) || document.body;
+
+  // (Optional but recommended) ensure images are loaded before printing
+  if (preloadImages) {
+    const pending = Array.from(root.querySelectorAll('img')).filter(i => !i.complete);
+    if (pending.length) {
+      await Promise.all(
+        pending.map(
+          i =>
+            new Promise(resolve => {
+              i.onload = resolve;
+              i.onerror = resolve;
+            })
+        )
+      );
+    }
+  }
+
+  // Prepare title → controls default file name in "Save as PDF"
+  const originalTitle = document.title;
+  const titleNoExt = desiredFilename.replace(/\.pdf$/i, '');
+
+  const cleanup = () => {
+    document.title = originalTitle;
+    document.body.classList.remove(printClass);
+    window.removeEventListener('afterprint', cleanup);
+    document.removeEventListener('visibilitychange', onVisibilityBack);
+  };
+
+  // Some browsers fire 'afterprint'; 'visibilitychange' is a safety net
+  const onVisibilityBack = () => {
+    if (document.visibilityState === 'visible') setTimeout(cleanup, 0);
+  };
+
+  document.body.classList.add(printClass);
+  document.title = titleNoExt;
+  window.addEventListener('afterprint', cleanup);
+  document.addEventListener('visibilitychange', onVisibilityBack);
+
+  // Give the new title a tick to apply, then print
+  setTimeout(() => window.print(), 0);
+
+  // Final fallback cleanup (e.g., if neither event fires)
+  setTimeout(cleanup, 5000);
+}