|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const PDFExportGuide = { |
|
|
|
|
|
|
|
|
chrome: { |
|
|
destination: "Save as PDF", |
|
|
layout: "Landscape", |
|
|
paperSize: "A4", |
|
|
margins: "None", |
|
|
scale: "Fit to page width", |
|
|
backgroundGraphics: true, |
|
|
headers: false |
|
|
}, |
|
|
|
|
|
|
|
|
firefox: { |
|
|
destination: "Save as PDF", |
|
|
orientation: "Landscape", |
|
|
paperSize: "A4", |
|
|
margins: "None", |
|
|
scale: 100, |
|
|
printBackgrounds: true, |
|
|
shrinkToFit: true |
|
|
}, |
|
|
|
|
|
|
|
|
safari: { |
|
|
PDF: "Save as PDF", |
|
|
orientation: "Landscape", |
|
|
paperSize: "A4", |
|
|
scale: "100%", |
|
|
printBackgrounds: true |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const enhancedPrintCSS = ` |
|
|
@media print { |
|
|
/* Force exact dimensions */ |
|
|
html, body { |
|
|
width: 297mm; |
|
|
height: 210mm; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
/* Hide everything except comic pages */ |
|
|
body > *:not(.comic-container) { |
|
|
display: none !important; |
|
|
} |
|
|
|
|
|
/* Comic container full size */ |
|
|
.comic-container { |
|
|
width: 297mm !important; |
|
|
height: 210mm !important; |
|
|
margin: 0 !important; |
|
|
padding: 0 !important; |
|
|
position: relative !important; |
|
|
} |
|
|
|
|
|
/* Each page exact A4 landscape */ |
|
|
.comic-page { |
|
|
width: 297mm !important; |
|
|
height: 210mm !important; |
|
|
page-break-after: always !important; |
|
|
page-break-inside: avoid !important; |
|
|
position: relative !important; |
|
|
margin: 0 !important; |
|
|
padding: 10mm !important; |
|
|
box-sizing: border-box !important; |
|
|
} |
|
|
|
|
|
/* Grid fills available space */ |
|
|
.comic-grid { |
|
|
width: 100% !important; |
|
|
height: 100% !important; |
|
|
display: grid !important; |
|
|
grid-template-columns: 1fr 1fr !important; |
|
|
grid-template-rows: 1fr 1fr !important; |
|
|
gap: 5mm !important; |
|
|
} |
|
|
|
|
|
/* Panels fill grid cells */ |
|
|
.panel { |
|
|
width: 100% !important; |
|
|
height: 100% !important; |
|
|
position: relative !important; |
|
|
overflow: hidden !important; |
|
|
border: 2px solid black !important; |
|
|
} |
|
|
|
|
|
.panel img { |
|
|
width: 100% !important; |
|
|
height: 100% !important; |
|
|
object-fit: contain !important; |
|
|
} |
|
|
|
|
|
/* Print settings */ |
|
|
@page { |
|
|
size: A4 landscape; |
|
|
margin: 0; |
|
|
} |
|
|
} |
|
|
`; |
|
|
|
|
|
|
|
|
function preparePDFExport() { |
|
|
|
|
|
const existingPrintStyles = document.querySelector('#pdf-print-styles'); |
|
|
if (existingPrintStyles) { |
|
|
existingPrintStyles.remove(); |
|
|
} |
|
|
|
|
|
|
|
|
const styleEl = document.createElement('style'); |
|
|
styleEl.id = 'pdf-print-styles'; |
|
|
styleEl.innerHTML = enhancedPrintCSS; |
|
|
document.head.appendChild(styleEl); |
|
|
|
|
|
|
|
|
const comicPages = document.querySelectorAll('.comic-page'); |
|
|
comicPages.forEach(page => { |
|
|
page.style.pageBreakAfter = 'always'; |
|
|
page.style.pageBreakInside = 'avoid'; |
|
|
}); |
|
|
|
|
|
|
|
|
const userAgent = navigator.userAgent; |
|
|
let instructions = ''; |
|
|
|
|
|
if (userAgent.includes('Chrome') || userAgent.includes('Edge')) { |
|
|
instructions = 'Chrome/Edge detected. Use these settings:\n' + |
|
|
'• Layout: Landscape\n' + |
|
|
'• Margins: None\n' + |
|
|
'• Scale: Fit to page width'; |
|
|
} else if (userAgent.includes('Firefox')) { |
|
|
instructions = 'Firefox detected. Use these settings:\n' + |
|
|
'• Orientation: Landscape\n' + |
|
|
'• Margins: None\n' + |
|
|
'• Scale: 100%'; |
|
|
} else if (userAgent.includes('Safari')) { |
|
|
instructions = 'Safari detected. Use these settings:\n' + |
|
|
'• Orientation: Landscape\n' + |
|
|
'• Scale: 100%'; |
|
|
} |
|
|
|
|
|
if (instructions) { |
|
|
console.log('📄 PDF Export Settings:\n' + instructions); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function exportToPDFEnhanced() { |
|
|
preparePDFExport(); |
|
|
|
|
|
setTimeout(() => { |
|
|
window.print(); |
|
|
}, 100); |
|
|
} |
|
|
|
|
|
|
|
|
window.exportToPDFEnhanced = exportToPDFEnhanced; |