stab1

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <button class="pdf-button" @click="exportPdf">Esporta PDF</button>
+    <button class="pdf-button" @click="exportPdf(intestazione.nomefile ? `${intestazione.nomefile}.pdf` : 'certificato-prova.pdf')">Esporta PDF</button>
     <div class="report" ref="printable" contenteditable="true">
       <header>
         <img src="/report_header.png" alt="Intestazione Unilab" class="report-header-image" />
@@ -70,10 +70,16 @@
 
 
       <footer>
-        <div>{{ intestazione.notapp }}</div>
+        <div class="notepp">{{ intestazione.notapp }}</div>
         <div class="signatures">
-          <p>Lo sperimentatore<br>Dott. Ing. Giacomo Calussi</p>
-          <p>Il Direttore del Laboratorio<br>Dott. Ing. Paolo Neri</p>
+          <div class="signblock">
+            <span class="sign1">Lo sperimentatore</span><br>
+            <span class="sign2">Dott. Ing. Giacomo Calussi</span>
+          </div>
+          <div class="signblock">
+            <span class="sign1">Il Direttore del Laboratorio</span><br>
+            <span class="sign2">Dott. Ing. Paolo Neri</span>
+          </div>
         </div>
       </footer>
     </div>
@@ -197,11 +203,11 @@ function capitalizeEachWord(str) {
 }
 
 
-function exportPdf() {
+function exportPdf(filename = 'certificato-prova.pdf') {
   html2pdf()
     .from(printable.value)
     .set({
-  filename: `certificato-prova.pdf`,
+  filename,
   html2canvas: { scale: 2 },
   jsPDF: {
         unit: 'mm',
@@ -285,13 +291,15 @@ body {
 .report-header-image {
   width: 100%;
   height: auto;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
   display: block;
 }
 
 .report {
-  width: 100%;
+  /* Assicuriamoci che .report abbia altezza A4 e posizionamento relativo */
+  position: relative;
   max-width: 210mm;
+  min-height: 289mm;
   padding: 4mm;
   margin: 0 auto;
   background: white;
@@ -300,7 +308,7 @@ body {
 
 
 header {
-  margin-bottom: 8px;
+  margin-bottom: 4px;
 }
 
 .center {
@@ -310,14 +318,15 @@ header {
 }
 
 .section-title {
-  padding: 6px;
+  padding: 4px;
   font-weight: bold;
-  margin-top: 10px;
+  margin-top: 16px;
+  margin-bottom: 2px;
   text-align: center;
 }
 
 .sub-header {
-  padding: 6px;
+  padding: 4px;
   text-align: center;
 }
 
@@ -330,7 +339,7 @@ table {
 th,
 td {
   border: 1px solid #000;
-  padding: 2px;
+  padding: 1px;
   font-size: 0.85em;
   text-align: center;
 }
@@ -338,8 +347,7 @@ td {
 .info-table {
   width: 80%;
   border: 2px solid black;
-  margin-left: auto;
-  margin-right: auto;
+  margin: 0 auto;
   border-collapse: collapse;
 }
 
@@ -358,7 +366,7 @@ td {
 }
 
 .note-section {
-  margin-top: 10px;
+  margin-top: 2px;
 }
 
 .note-table {
@@ -373,13 +381,6 @@ td {
   text-align: left;
 }
 
-.signatures {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 40px;
-  font-weight: bold;
-}
-
 .pdf-button {
   position: fixed;
   top: 20px;
@@ -396,4 +397,51 @@ td {
 .pdf-button:hover {
   background-color: #0056b3;
 }
+
+
+
+footer {
+  /* Posizione assoluta in fondo al contenitore .report */
+  position: absolute;
+  bottom: 4mm;          /* distanza dal bordo inferiore */
+  left: 4mm;            /* stesso padding orizzontale di .report */
+  right: 4mm;
+}
+
+footer .signatures {
+  /* Manteniamo le firme in orizzontale ma riduciamo margine sopra se serve */
+  margin-top: 0;
+  display: flex;
+  justify-content: space-between;
+  text-align: center;
+  padding-left: 80px;
+  padding-right: 80px;
+  border-top: 1px solid #000;
+}
+
+footer .sign1{
+  font-size: 0.75em;
+}
+
+footer .sign2{
+  font-size: 0.65em;
+}
+
+footer .signblock{
+  border-bottom: 1px solid #000;
+  padding-bottom: 12mm;
+}
+
+/* Stilizzo il div di notepp (assumo classe .modreport o ne crei una nuova) */
+.modreport {
+  font-size: 0.7em;     /* carattere piccolo */
+  margin: 0;            /* rimuovo margini inutili */
+  text-align: right;
+}
+
+/* Se la sezione delle notepp ha una sua classe, ad esempio .notepp: */
+.notepp {
+  font-size: 0.7em;
+  margin: 0;
+}
 </style>