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>
<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{

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>
</tr>
<tr>
<th>N.</th>
<th>&nbsp;&nbsp;&nbsp;N.&nbsp;&nbsp;&nbsp;</th>
<th>Data</th>
<th>[mm]</th>
<th>[mm]</th>

View File

@ -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>

View File

@ -1,5 +1,6 @@
import { createApp } from 'vue'
import App from './App.vue'
import './style.css'
import './assets/print.css';
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);
}