Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- breedmaster:downloadmanager [17.08.2018 11:33] – Manfred Link
+++ breedmaster:downloadmanager [07.04.2025 11:45] (aktuell) – Manfred Link
@@ Zeile 7: / Zeile 7: @@
 Ab Version 12.7.6 können die hochgeladenen Dateien als ZIP-File wieder heruntergeladen werden.
+===== Download-Funktion mit PDF-Vorschau =====
+Um Downloads auch an anderen Stellen als über den Menüpunkt 'Downloads' besteht die Möglicheit das download.php Modul zu nutzen. Benötigt werden hierbei zwei Parameter:
+  * ''m'' – das Modul, in dem sich die Datei befindet (''adressen'', ''bilder'', ''clubnachrichten'', ''downloads'', ''templates'', ''userfiles'')
+  * ''id'' – die eindeutige ID der Datei
+Beispiel-Aufruf:
+  download.php?m=downloads&id=78
+Damit wird z. B. eine Datei aus dem Modul ''downloads'' mit der ID ''78'' geladen.
+===== Beispiele =====
+Wenn unter der ID 78 im Downloadmanager die Vereinssatzung gespeichert ist, dann wird lediglich eine Verlinkung erstellt. Die Datei wird im Browser dann zum Download angeboten:
+<code html>
+<p><a href="download.php?m=downloads&id=78">Satzung</a></p>
+</code>
+Das Verhalten der
+==== Ausgabe im Browser im PDF-Viewer ====
+Nachfolgend ein Beispiel für die Integration von PDF-Dateien mit einer Vorschaufunktion in eine Webseite:
+<code html>
+<p><a class="btn btn-lg btn-info btn-block" href="#" onclick="openPdfViewer('78')">Beispieldokument 1</a></p>       <!-- Zeile 1 -->
+<p><a class="btn btn-lg btn-info btn-block" href="#" onclick="openPdfViewer('79')">Beispieldokument 2</a></p>       <!-- Zeile 2 -->
+<div id="pdf-container">                                                                                                <!-- Zeile 3 -->
+	<div id="pdf-overlay">                                                                                              <!-- Zeile 4 -->
+		<div class="btn btn-danger" id="pdf-close-button" onclick="closePdfViewer()">&times;</div>                    <!-- Zeile 5 -->
+		<iframe id="pdf-iframe" src=""></iframe>                                                                      <!-- Zeile 6 -->
+	</div>                                                                                                              <!-- Zeile 7 -->
+</div>                                                                                                                  <!-- Zeile 8 -->
+<script src="pdfviewer/build/pdf.mjs"></script>                                                                         <!-- Zeile 9 -->
+<script>                                                                                                                <!-- Zeile 10 -->
+	function openPdfViewer(pdfUrl) {                                                                                    <!-- Zeile 11 -->
+		const pdfIframe = document.getElementById('pdf-iframe');                                                       <!-- Zeile 12 -->
+		pdfUrl = 'download.php?m=downloads&id=' + pdfUrl;                                                              <!-- Zeile 13 -->
+		console.log(pdfUrl);                                                                                           <!-- Zeile 14 -->
+		pdfIframe.src = pdfUrl;                                                                                        <!-- Zeile 15 -->
+		document.getElementById('pdf-container').style.display = 'block';                                              <!-- Zeile 16 -->
+	}                                                                                                                  <!-- Zeile 17 -->
+	function closePdfViewer() {                                                                                        <!-- Zeile 18 -->
+		const pdfIframe = document.getElementById('pdf-iframe');                                                       <!-- Zeile 19 -->
+		pdfIframe.src = '';                                                                                            <!-- Zeile 20 -->
+		document.getElementById('pdf-container').style.display = 'none';                                               <!-- Zeile 21 -->
+	}                                                                                                                  <!-- Zeile 22 -->
+</script>                                                                                                               <!-- Zeile 23 -->
+</code>
+==== Erklärung der Komponenten ====
+**Zeile 1–2:**
+Erstellen zwei Schaltflächen (Links) mit der Aufschrift ''Beispieldokument 1'' und ''Beispieldokument 2''.
+Anstelle einer direkten URL wird die JavaScript-Funktion ''openPdfViewer()'' über das ''onclick''-Attribut aufgerufen.
+Der Funktion wird jeweils die ID der Datei übergeben (''78'' bzw. ''79''). Die Klassen sorgen für ein ansprechendes, blockartiges Design.
+**Zeile 3–8:**
+Dies ist der HTML-Container für die PDF-Vorschau.
+Er enthält ein Overlay mit einem eingebetteten ''iframe'' (Zeile 6), das später das PDF anzeigt.
+In Zeile 5 ist ein roter Schließen-Button (×), der ebenfalls per JavaScript (''onclick'') gesteuert wird.
+**Zeile 9:**
+Einbindung eines PDF-Viewer-Skripts. Diese Zeile kann angepasst oder entfernt werden, wenn kein PDF.js verwendet wird.
+**Zeile 11–17 – Funktion ''openPdfViewer'':**
+Diese Funktion wird beim Klick auf eine der Schaltflächen (Zeile 1 oder 2) aufgerufen.
+  * **Zeile 12:** Das PDF-Anzeige-Element (''iframe'') wird referenziert.
+  * **Zeile 13:** Die vollständige URL für den Dateidownload wird erzeugt.
+  * **Zeile 14:** Die URL wird in der Konsole des Browsers ausgegeben (nur zur Kontrolle).
+  * **Zeile 15:** Das PDF wird im ''iframe'' geladen.
+  * **Zeile 16:** Der gesamte Vorschau-Bereich wird sichtbar gemacht.
+**Zeile 18–22 – Funktion ''closePdfViewer'':**
+Diese Funktion wird aufgerufen, wenn der Benutzer das Vorschaufenster schließen möchte.
+  * **Zeile 19:** Das ''iframe'' wird referenziert.
+  * **Zeile 20:** Die Quelle wird gelöscht (damit das PDF entladen wird).
+  * **Zeile 21:** Der Container wird wieder ausgeblendet.
+==== Hinweis für Einsteiger ====
+Die Datei-ID, die in ''openPdfViewer()'' übergeben wird, muss mit einer gültigen Datei in der Datenbank übereinstimmen.
+Stelle sicher, dass die Datei im Modul ''downloads'' vorhanden ist – oder passe den Parameter ''m'' in Zeile 13 entsprechend an (z. B. ''m=templates'').
+Die Datei ''download.php'' muss auf deinem Server erreichbar sein und die entsprechenden PDF-Dateien korrekt ausliefern – sonst bleibt das Vorschaufenster leer.