varie css + export nativo da finire
This commit is contained in:
parent
7ac1d11b83
commit
89674095b5
34
src/App.vue
34
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{
|
||||
|
||||
7
src/assets/print.css
Normal file
7
src/assets/print.css
Normal file
@ -0,0 +1,7 @@
|
||||
/* Page setup */
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 10mm 10mm 15mm 10mm;
|
||||
}
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
<th rowspan="2">Struttura di<br>riferimento</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>N.</th>
|
||||
<th> N. </th>
|
||||
<th>Data</th>
|
||||
<th>[mm]</th>
|
||||
<th>[mm]</th>
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
<th rowspan="2">Struttura di<br>riferimento</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>N.</th>
|
||||
<th> N. </th>
|
||||
<th>Data</th>
|
||||
<th>[mm]</th>
|
||||
<th>[mm]</th>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import './style.css'
|
||||
import './assets/print.css';
|
||||
|
||||
createApp(App).mount('#app')
|
||||
|
||||
51
src/utils/printPdfNative.js
Normal file
51
src/utils/printPdfNative.js
Normal 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);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user