// Warten, bis das DOM vollständig geladen ist $(document).ready(function() { // Globale Variable zum Speichern des PDF-Blobs let pdfBlob = null; let pdfObjectURL = null; let lastPDFFilename = 'Produktdokument.pdf'; let logoDataURL = null; // Variable zum Speichern des vorgeladenen Logos let logoAspectRatio = 1; // Seitenverhältnis des Logos (Breite / Höhe) let logoWidth = 40; // Breite erhöht für bessere Sichtbarkeit let logoHeight = 15; // Wird basierend auf dem Seitenverhältnis angepasst // Logo vorab laden preloadLogo('https://cdn02.plentymarkets.com/5rubvkuloybx/frontend/Template/UF-logo.png'); // Funktion zum Vorladen des Logos function preloadLogo(logoSrc) { console.log('Lade Logo vor der PDF-Erstellung...'); const proxyUrl = 'https://apps.spotlight-dev.de/image-proxy?url=' + encodeURIComponent(logoSrc); const img = new Image(); img.crossOrigin = 'Anonymous'; img.onload = function() { logoAspectRatio = this.width / this.height; logoHeight = logoWidth / logoAspectRatio; if (logoAspectRatio > 2.5) { logoHeight = logoWidth / logoAspectRatio; } else if (logoAspectRatio < 0.8) { logoWidth = logoHeight * logoAspectRatio; } const canvas = document.createElement('canvas'); canvas.width = this.width; canvas.height = this.height; canvas.getContext('2d').drawImage(img, 0, 0); logoDataURL = canvas.toDataURL('image/png'); console.log('Logo erfolgreich vorgeladen!', logoWidth, 'x', logoHeight, 'mm'); }; img.onerror = function() { console.error('Logo konnte nicht geladen werden'); }; img.src = proxyUrl; } // Funktion zum Drucken des PDFs function printPDF() { if (!pdfObjectURL) { alert('Bitte zuerst ein PDF generieren.'); return; } console.log('Öffne PDF zum Drucken...'); try { // Methode 1: Versuch mit neuem Tab/Popup const printWindow = window.open(pdfObjectURL, '_blank'); if (printWindow === null) { // Popup wurde blockiert, versuche alternative Methode console.warn('Popup wurde blockiert. Verwende alternative Druckmethode...'); printWithIframe(); } else { // Popup wurde erlaubt printWindow.addEventListener('load', function() { setTimeout(function() { try { printWindow.print(); } catch (e) { console.error('Fehler beim Drucken im neuen Fenster:', e); alert('Druckdialog konnte nicht automatisch geöffnet werden. Bitte drucken Sie die Seite manuell.'); } }, 1000); }); } } catch (e) { console.error('Fehler beim Öffnen des Druckfensters:', e); // Fallback zur iframe-Methode printWithIframe(); } } // Alternative Druckmethode mit iframe function printWithIframe() { console.log('Verwende iframe-Methode zum Drucken...'); // Entferne vorhandene Druck-iframes const oldIframe = document.getElementById('print-iframe'); if (oldIframe) { document.body.removeChild(oldIframe); } // Erstelle ein unsichtbares iframe const iframe = document.createElement('iframe'); iframe.id = 'print-iframe'; iframe.style.position = 'fixed'; iframe.style.width = '1px'; iframe.style.height = '1px'; iframe.style.opacity = '0.01'; iframe.style.left = '-9999px'; iframe.style.top = '-9999px'; // Setze die PDF-URL als Quelle iframe.src = pdfObjectURL; // Warte, bis der Inhalt geladen ist, dann drucken iframe.onload = function() { try { setTimeout(function() { // Versuche zu drucken iframe.contentWindow.print(); // Lösche das iframe nach einer Weile setTimeout(function() { try { document.body.removeChild(iframe); } catch (e) { console.warn('Konnte iframe nicht entfernen:', e); } }, 10000); // 10 Sekunden warten }, 1000); } catch (e) { console.error('Fehler beim Drucken mit iframe:', e); alert('Drucken nicht möglich. Möglicherweise blockiert Ihr Browser den Druckvorgang.\n\nBitte versuchen Sie, das PDF herunterzuladen und manuell zu drucken.'); // Biete Download als Alternative an offerDownload(); } }; // Fehlerbehandlung iframe.onerror = function() { console.error('Fehler beim Laden des iframes'); alert('Das PDF konnte nicht geladen werden. Bitte versuchen Sie es erneut oder laden Sie es manuell herunter.'); offerDownload(); }; // Füge das iframe zum Dokument hinzu document.body.appendChild(iframe); } // Biete Download als Fallback an function offerDownload() { console.log('Biete PDF-Download an'); // Erstelle einen Download-Link const link = document.createElement('a'); link.href = pdfObjectURL; link.download = lastPDFFilename; link.textContent = 'PDF herunterladen'; link.style.display = 'block'; link.style.margin = '20px auto'; link.style.textAlign = 'center'; link.style.padding = '10px'; link.style.backgroundColor = '#4CAF50'; link.style.color = 'white'; link.style.textDecoration = 'none'; link.style.width = '200px'; link.style.borderRadius = '4px'; // Füge den Link oben im Preview-Bereich ein const previewDiv = document.getElementById('preview'); previewDiv.innerHTML = '

Drucken nicht möglich

Sie können das PDF herunterladen und manuell drucken.

'; previewDiv.appendChild(link); } // Funktion zur PDF-Generierung function generatePDF() { // Melde dem Benutzer, dass die PDF-Generierung beginnt console.log('PDF-Generierung wird gestartet...'); // Hole die jsPDF-Instanz const { jsPDF } = window.jspdf; // Erstelle ein neues PDF-Dokument im A4-Format const doc = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4', compress: true }); // Setze eine eindeutige Funktion, die für alle Seitenoperationen aufgerufen wird // Diese zentralisierte Verarbeitung stellt sicher, dass alle Seiten konsistent formatiert werden doc.setPageCallback = function(pageInfo) { console.log("Seite verarbeitet:", pageInfo.pageNumber); addHeader(); addFooter(pageInfo.pageNumber); }; // Überschreibe die interne addPage-Methode, um unsere Callback-Funktion aufzurufen const originalAddPage = doc.addPage; doc.addPage = function() { originalAddPage.apply(this, arguments); const pageInfo = doc.getCurrentPageInfo(); if (doc.setPageCallback) { doc.setPageCallback(pageInfo); } }; // Füge Metadaten zum PDF hinzu doc.setProperties({ title: 'Datenblatt', subject: 'Datenblatt', author: 'BB Sport GmbH & Co KG', keywords: 'Produkte', creator: 'BB Sport GmbH & Co KG' }); // Definiere Standardschriftart und -größe doc.setFont('helvetica'); doc.setFontSize(10); // Standardabstände const margin = 20; let currentY = margin; // Funktion zum Zeichnen des Headers auf jeder Seite function addHeader() { // Position zurücksetzen currentY = margin; // Prüfe, ob wir das Logo bereits vorgeladen haben if (logoDataURL) { // Verwende das vorgeladene Logo mit korrektem Seitenverhältnis console.log('Verwende vorgeladenes Logo im Header mit Dimensionen:', logoWidth, 'x', logoHeight, 'mm'); // Setze das Logo etwas höher, damit es besser zentriert ist doc.addImage(logoDataURL, 'PNG', margin, currentY, logoWidth, logoHeight); } else { const logoSrc = 'https://cdn02.plentymarkets.com/5rubvkuloybx/frontend/Template/UF-logo.png'; // Logo direkt im Dokument suchen als Fallback const logoImg = document.getElementById('logoImage'); if (logoImg && logoImg.complete && logoImg.naturalWidth > 0) { try { console.log('Logo aus DOM laden'); // Seitenverhältnis des DOM-Images berechnen const imgAspectRatio = logoImg.naturalWidth / logoImg.naturalHeight; const adjustedHeight = logoWidth / imgAspectRatio; const canvas = document.createElement('canvas'); canvas.width = logoImg.naturalWidth; canvas.height = logoImg.naturalHeight; const ctx = canvas.getContext('2d'); ctx.drawImage(logoImg, 0, 0); const logoDataURLFromDOM = canvas.toDataURL('image/png'); doc.addImage(logoDataURLFromDOM, 'PNG', margin, currentY, logoWidth, adjustedHeight); console.log('Logo erfolgreich aus DOM geladen und hinzugefügt'); } catch (e) { console.warn('Logo konnte nicht aus DOM geladen werden:', e); // LOGO-Text wird NICHT mehr angezeigt - wir versuchen jetzt, ein Bild zu laden loadImageDirectlyIntoPDF(logoSrc, margin, currentY, logoWidth); } } else { // Versuche das Logo direkt zu laden loadImageDirectlyIntoPDF(logoSrc, margin, currentY, logoWidth); } } // Firmenname und Kontaktdaten doc.setFont('helvetica', 'bold'); doc.setFontSize(14); doc.text('BB Sport GmbH & Co KG', 190, currentY + 5, { align: 'right' }); doc.setFont('helvetica', 'normal'); doc.setFontSize(8); doc.text('Söderbergstr. 14, 84513 Töging am Inn', 190, currentY + 10, { align: 'right' }); doc.text('Tel: +49 (0) 8631 988 2029 | E-Mail: service@unterkunft-fluechtlinge.de', 190, currentY + 15, { align: 'right' }); // Linie unter dem Header currentY += 20; doc.setDrawColor(200, 200, 200); doc.line(margin, currentY, 190, currentY); currentY += 10; return currentY; } // Direktes Laden eines Bildes in das PDF function loadImageDirectlyIntoPDF(src, x, y, width) { fetch('https://corsproxy.io/?url=' + encodeURIComponent(src)) .then(response => response.blob()) .then(blob => { const reader = new FileReader(); reader.onload = function() { const imgData = reader.result; // Temporäres Image zum Ermitteln der Dimensionen erstellen const tempImg = new Image(); tempImg.onload = function() { // Berechne Höhe basierend auf dem Seitenverhältnis const imgAspectRatio = tempImg.width / tempImg.height; const height = width / imgAspectRatio; // Logo in allen Seiten einfügen const pageCount = doc.internal.getNumberOfPages(); for (let i = 1; i <= pageCount; i++) { doc.setPage(i); doc.addImage(imgData, 'PNG', x, y, width, height); } }; tempImg.src = imgData; }; reader.readAsDataURL(blob); }) .catch(error => { console.error('Fehler beim direkten Laden des Logos:', error); }); } // Funktion zum Zeichnen des Footers auf jeder Seite function addFooter(pageNumber) { // Position des Footers definieren (weiter unten auf der Seite) const pageHeight = doc.internal.pageSize.height; const footerPosition = pageHeight - 10; // 10mm vom unteren Rand // Linie über dem Footer doc.setDrawColor(200, 200, 200); doc.line(margin, footerPosition - 15, 190, footerPosition - 15); // Footer-Text doc.setFont('helvetica', 'normal'); doc.setFontSize(8); doc.text('BB Sport GmbH & Co KG | E-mail: service@unterkunft-fluechtlinge.de', 105, footerPosition - 10, { align: 'center' }); doc.text('Bürozeiten: Montag bis Donnerstag von 7.30 - 17.00 Uhr | Freitag von 7:30 - 13.30 Uhr', 105, footerPosition - 5, { align: 'center' }); // Seitenzahl - nun prominent im Footer positioniert doc.setFont('helvetica', 'bold'); // Fett für Seitenzahlen doc.setFontSize(9); // Etwas größer für bessere Lesbarkeit doc.text('Seite ' + pageNumber, 190, footerPosition - 5, { align: 'right' }); } // Erstelle das PDF async function createPDF() { try { // Wir zeichnen den Header für die erste Seite currentY = addHeader(); addFooter(1); // Kundendaten doc.setFont('helvetica', 'bold'); doc.setFontSize(12); doc.text('Produktinformationen', margin, currentY); currentY += 10; // Extrahiere den echten Content const productContent = document.querySelector('.printrow'); if (productContent) { // Produkttitel const title = productContent.querySelector('.printname')?.textContent || 'Produkttitel'; const articleNumber = productContent.querySelector('.printnumber')?.textContent || 'ArtikelNr.: ---'; // Titel einfügen doc.setFont('helvetica', 'bold'); doc.setFontSize(14); // Splitten des Textes, falls er zu lang für eine Zeile ist const titleLines = doc.splitTextToSize(title, 190 - 2 * margin); doc.text(titleLines, margin, currentY); currentY += titleLines.length * 7 + 3; // Artikelnummer doc.setFontSize(10); doc.setFont('helvetica', 'normal'); doc.text(articleNumber, margin, currentY); currentY += 8; // Produktbilder await processImages(productContent); // Produktbeschreibung processDescription(productContent); // Footer für die erste Seite hinzufügen addFooter(1); // Das PDF speichern oder öffnen // Die Output-Methode auf 'blob' setzen const pdfOutput = doc.output('blob'); // Speichern des PDF-Blobs für späteren Zugriff pdfBlob = pdfOutput; // Falls bereits eine URL für ein vorheriges PDF existiert, diese freigeben if (pdfObjectURL) { URL.revokeObjectURL(pdfObjectURL); } // Erstellen einer URL für den PDF-Blob pdfObjectURL = URL.createObjectURL(pdfBlob); // Dateiname festlegen (für evtl. späteren Download) lastPDFFilename = 'Produktdokument.pdf'; console.log('PDF wurde erfolgreich generiert!'); // Direkt zum Drucken übergehen, ohne Download try { printPDF(); } catch (printError) { console.error('Fehler beim Druckversuch:', printError); alert('Das PDF wurde erstellt, aber der Druckdialog konnte nicht automatisch geöffnet werden.\n\nBitte klicken Sie auf "PDF drucken".'); } } else { doc.text("Keine Produktinformationen gefunden.", margin, currentY); const pdfOutput = doc.output('blob'); pdfBlob = pdfOutput; if (pdfObjectURL) { URL.revokeObjectURL(pdfObjectURL); } pdfObjectURL = URL.createObjectURL(pdfBlob); lastPDFFilename = 'Dokument.pdf'; console.log('Leeres PDF wurde generiert'); // Auch hier direkt drucken try { printPDF(); } catch (printError) { console.error('Fehler beim Druckversuch:', printError); alert('Das PDF wurde erstellt, aber der Druckdialog konnte nicht automatisch geöffnet werden.\n\nBitte klicken Sie auf "PDF drucken".'); } } } catch (error) { console.error("Fehler bei der PDF-Erstellung:", error); alert("Fehler bei der PDF-Erstellung: " + error.message); } } // Bildverarbeitung async function processImages(productContent) { const images = productContent.querySelectorAll('.printimg img'); if (!images || images.length === 0) return; for (let i = 0; i < images.length; i++) { const imgSrc = images[i].getAttribute('src'); if (!imgSrc || imgSrc.trim() === '') continue; try { // Direkt über fetch laden (umgeht Canvas-CORS) const imageData = await loadImage(imgSrc); // Dimensionen über temporäres Image ermitteln const dims = await new Promise((resolve) => { const tempImg = new Image(); tempImg.onload = () => resolve({ w: tempImg.width, h: tempImg.height }); tempImg.onerror = () => resolve({ w: 1000, h: 800 }); tempImg.src = imageData; }); const imgWidth = 80; const imgHeight = imgWidth * dims.h / dims.w; if (currentY + imgHeight > 250) { doc.addPage(); currentY = margin + 30; addHeader(); } doc.addImage(imageData, 'JPEG', margin, currentY, imgWidth, imgHeight); currentY += imgHeight + 10; console.log('Bild ' + (i+1) + ' erfolgreich eingefügt'); break; // Nur erstes Bild } catch (e) { console.warn('Bild ' + (i+1) + ' fehlgeschlagen:', e.message); } } } // Verarbeite die Produktbeschreibung function processDescription(productContent) { const descSection = productContent.querySelector('.printdesc'); if (descSection) { // Alle direkten Kindelemente in der originalen Reihenfolge durchlaufen const childNodes = descSection.children; console.log('Verarbeite Beschreibung mit ' + childNodes.length + ' Elementen'); for (let i = 0; i < childNodes.length; i++) { const element = childNodes[i]; const tagName = element.tagName.toLowerCase(); // Überschriften (h1, h2, h3, etc.) if (tagName.startsWith('h') && tagName.length === 2) { const headingText = element.textContent || ''; const headingLevel = parseInt(tagName[1]); doc.setFont('helvetica', 'bold'); doc.setFontSize(headingLevel === 2 ? 12 : (headingLevel === 3 ? 11 : 10)); // Splitten des Textes, falls er zu lang für eine Zeile ist const headingLines = doc.splitTextToSize(headingText, 190 - 2 * margin); // Prüfen, ob genug Platz auf der Seite ist if (currentY + headingLines.length * 7 > 250) { doc.addPage(); // Header auf der neuen Seite hinzufügen currentY = margin + 30; // Zurücksetzen der Y-Position addHeader(); // Header hinzufügen } doc.text(headingLines, margin, currentY); currentY += headingLines.length * 7 + 3; } // Absätze else if (tagName === 'p') { const paragraphText = element.textContent || ''; doc.setFont('helvetica', 'normal'); doc.setFontSize(10); // Splitten des Textes, falls er zu lang für eine Zeile ist const paragraphLines = doc.splitTextToSize(paragraphText, 190 - 2 * margin); // Prüfen, ob genug Platz auf der Seite ist if (currentY + paragraphLines.length * 5 > 250) { doc.addPage(); // Header auf der neuen Seite hinzufügen currentY = margin + 30; // Zurücksetzen der Y-Position addHeader(); // Header hinzufügen } doc.text(paragraphLines, margin, currentY); currentY += paragraphLines.length * 5 + 5; } // Listen else if (tagName === 'ul') { const listItems = element.querySelectorAll('li'); listItems.forEach(item => { const itemText = '• ' + (item.textContent || ''); doc.setFont('helvetica', 'normal'); doc.setFontSize(10); // Splitten des Textes, falls er zu lang für eine Zeile ist const itemLines = doc.splitTextToSize(itemText, 185 - 2 * margin); // Prüfen, ob genug Platz auf der Seite ist if (currentY + itemLines.length * 5 > 250) { doc.addPage(); // Header auf der neuen Seite hinzufügen currentY = margin + 30; // Zurücksetzen der Y-Position addHeader(); // Header hinzufügen } doc.text(itemLines, margin, currentY); currentY += itemLines.length * 5 + 2; }); currentY += 3; // Zusätzlicher Abstand nach der Liste } // Tabellen else if (tagName === 'table') { const tableElement = element; // Reduziere den Abstand vor der Tabelle currentY += 2; // Früher: 5 // Lasse die Überschrift "Technische Daten" weg, da sie bereits als h3 enthalten ist //doc.setFont('helvetica', 'bold'); //doc.setFontSize(11); //doc.text('Technische Daten', margin, currentY); currentY += 2; // Früher: 7 - Reduziere den Leerraum const rows = tableElement.querySelectorAll('tr'); const tableData = []; rows.forEach(row => { const cells = row.querySelectorAll('td'); if (cells.length >= 2) { const rowData = [ cells[0].textContent || '', cells[1].textContent.replace(/\t{2,}/g, "\n").replace(/\t/g, " ") || '' ]; tableData.push(rowData); } }); // Technische Daten als Tabelle rendern if (tableData.length > 0) { doc.autoTable({ startY: currentY, body: tableData, theme: 'plain', // Zurück zu 'plain' und manueller Linien-Steuerung styles: { fontSize: 9, cellPadding: 3, lineWidth: 0.5, // Einheitliche Linienstärke lineColor: [80, 80, 80] // Dunkelgrau }, columnStyles: { 0: { fontStyle: 'bold', cellWidth: 40 }, 1: { cellWidth: 'auto' } }, margin: { left: margin, right: margin, top: 40, // Abstand von oben für den Header bottom: 40 // Mehr Abstand unten für den Footer }, // Klare Tabelleneigenschaften tableLineWidth: 0.5, // Moderate Linienstärke tableLineColor: [80, 80, 80], // Dunkelgrau drawCell: function(cell, data) { // Klar definierte Zellenrahmen für alle Zellen const doc = data.doc; const cellPos = cell.getTextPos(); // Zeichne standardmäßig alle Außenlinien doc.setDrawColor(80, 80, 80); // Einheitliche Linienfarbe doc.setLineWidth(0.5); // Einheitliche Linienstärke // Zeichne Zellenrahmen (oben, rechts, unten, links) doc.rect(cell.x, cell.y, cell.width, cell.height, 'S'); }, // Entferne den didParseCell-Handler, der dickere Linien hinzugefügt hat didDrawPage: function(data) { // Header und Footer werden nicht explizit hier gezeichnet, // da die modifizierte addPage-Methode dies automatisch macht } }); // Position nach der Tabelle aktualisieren currentY = doc.autoTable.previous.finalY + 5; // Reduziere auch den Abstand nach der Tabelle } } } } } // Hilfsfunktion zum Laden eines Bildes function loadImage(src) { return new Promise(async (resolve, reject) => { try { const proxyUrl = 'https://apps.spotlight-dev.de/image-proxy?url=' + encodeURIComponent(src); const response = await fetch(proxyUrl); if (!response.ok) throw new Error('Status: ' + response.status); const blob = await response.blob(); if (blob.size === 0) throw new Error('Leere Antwort'); const reader = new FileReader(); reader.onloadend = () => resolve(reader.result); reader.onerror = () => reject(new Error('FileReader-Fehler')); reader.readAsDataURL(blob); } catch (e) { console.error('Bildladung fehlgeschlagen:', src, e.message); reject(e); } }); } // Hilfsfunktion: Blob → DataURL function blobToDataURL(blob) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onloadend = () => resolve(reader.result); reader.onerror = reject; reader.readAsDataURL(blob); }); } // Starte die PDF-Erstellung createPDF(); } setTimeout(function(){ generatePDF(); },1000) });