varie css + export nativo da finire

This commit is contained in:
LORENZO\pacio 2025-10-31 09:43:31 +01:00
parent 7ac1d11b83
commit 89674095b5
6 changed files with 75 additions and 22 deletions

View File

@ -87,6 +87,9 @@
</template> </template>
<script setup> <script setup>
import { nextTick } from 'vue';
import { computed } from 'vue';
import { printPdfNative } from './utils/printPdfNative.js';
import { ref, onMounted, watch } from 'vue' import { ref, onMounted, watch } from 'vue'
import html2pdf from 'html2pdf.js' import html2pdf from 'html2pdf.js'
import A_CUB from './components/risultati/A_CUB.vue' 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') { function exportPdf(filename = 'certificato-prova.pdf') {
const opt = { const opt = {
margin: 0, margin: 0,
filename, filename,
html2canvas: { scale: 2 }, html2canvas: { scale: 4 },
jsPDF: { unit: 'mm', format: [210, 297], orientation: 'portrait' }, jsPDF: { unit: 'mm', format: [210, 297], orientation: 'portrait' },
pagebreak: { mode: ['css','legacy'] } pagebreak: { mode: ['css','legacy'] }
}; };
@ -252,7 +240,13 @@ function exportPdf(filename = 'certificato-prova.pdf') {
.save(); .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) { function formatDate(dateStr) {
const date = new Date(dateStr) const date = new Date(dateStr)
@ -331,8 +325,8 @@ body {
display: block; display: block;
} }
.report { .report {
/* Assicuriamoci che .report abbia altezza A4 e posizionamento relativo */
position: relative; position: relative;
max-width: 210mm; max-width: 210mm;
min-height: 289mm; min-height: 289mm;
@ -388,7 +382,7 @@ td {
.info-table { .info-table {
width: 80%; width: 80%;
border: 2px solid black; border: 1px solid black;
margin: 0 auto; margin: 0 auto;
border-collapse: collapse; border-collapse: collapse;
} }
@ -462,11 +456,11 @@ footer .signatures {
} }
footer .sign1{ footer .sign1{
font-size: 0.75em; font-size: 1em;
} }
footer .sign2{ footer .sign2{
font-size: 0.65em; font-size: 0.9em;
} }
footer .signblock{ footer .signblock{

7
src/assets/print.css Normal file
View File

@ -0,0 +1,7 @@
/* Page setup */
@page {
size: A4;
margin: 10mm 10mm 15mm 10mm;
}

View File

@ -14,7 +14,7 @@
<th rowspan="2">Struttura di<br>riferimento</th> <th rowspan="2">Struttura di<br>riferimento</th>
</tr> </tr>
<tr> <tr>
<th>N.</th> <th>&nbsp;&nbsp;&nbsp;N.&nbsp;&nbsp;&nbsp;</th>
<th>Data</th> <th>Data</th>
<th>[mm]</th> <th>[mm]</th>
<th>[mm]</th> <th>[mm]</th>

View File

@ -14,7 +14,7 @@
<th rowspan="2">Struttura di<br>riferimento</th> <th rowspan="2">Struttura di<br>riferimento</th>
</tr> </tr>
<tr> <tr>
<th>N.</th> <th>&nbsp;&nbsp;&nbsp;N.&nbsp;&nbsp;&nbsp;</th>
<th>Data</th> <th>Data</th>
<th>[mm]</th> <th>[mm]</th>
<th>[mm]</th> <th>[mm]</th>

View File

@ -1,5 +1,6 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import './style.css' import './style.css'
import './assets/print.css';
createApp(App).mount('#app') createApp(App).mount('#app')

View File

@ -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);
}