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>
|
</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
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>
|
<th rowspan="2">Struttura di<br>riferimento</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th>N.</th>
|
<th> N. </th>
|
||||||
<th>Data</th>
|
<th>Data</th>
|
||||||
<th>[mm]</th>
|
<th>[mm]</th>
|
||||||
<th>[mm]</th>
|
<th>[mm]</th>
|
||||||
|
|||||||
@ -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> N. </th>
|
||||||
<th>Data</th>
|
<th>Data</th>
|
||||||
<th>[mm]</th>
|
<th>[mm]</th>
|
||||||
<th>[mm]</th>
|
<th>[mm]</th>
|
||||||
|
|||||||
@ -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')
|
||||||
|
|||||||
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