Benutzer-Werkzeuge

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung		Vorhergehende Überarbeitung
breedmaster:downloadmanager [26.06.2015 07:33] – Manfred Linkbreedmaster:downloadmanager [10.04.2025 14:51] (aktuell) – [Ausgabe im Browser im PDF-Viewer] Manfred Link
Zeile 3: Zeile 3:
  
 Den Downloadmanger finden Sie im Menü unter Sonstiges => Downloadmanager Den Downloadmanger finden Sie im Menü unter Sonstiges => Downloadmanager
 +
 +
 +
 +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>
 +<!-- Zeile 1 -->
 +<p><a class="btn btn-lg btn-info btn-block" href="#" onclick="openPdfViewer('78')">Beispieldokument 1</a></p>       
 +<!-- Zeile 2 -->
 +<p><a class="btn btn-lg btn-info btn-block" href="#" onclick="openPdfViewer('79')">Beispieldokument 2</a></p>       
 +<!-- Zeile 3 -->
 +<div id="pdf-container">                                                                                                
 +<!-- Zeile 4 -->
 + <div id="pdf-overlay">                                                                                              
 +<!-- Zeile 5 -->
 + <div class="btn btn-danger" id="pdf-close-button" onclick="closePdfViewer()">&times;</div>                    
 +<!-- Zeile 6 -->
 + <iframe id="pdf-iframe" src=""></iframe> 
 +<!-- Zeile 7 -->                                                                     
 + </div>   
 +<!-- Zeile 8 -->                                                                                                           
 +</div>          
 +                                                                                                        
 +<!-- Zeile 9 -->
 +<script src="pdfviewer/build/pdf.mjs"></script>                                                                         
 +
 +<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.
  

This website uses cookies. By using the website, you agree with storing cookies on your computer. Also, you acknowledge that you have read and understand our Privacy Policy. If you do not agree, please leave the website.

Weitere Information