Auf Thema antworten

Beitrag

[QUOTE="Sempervivum, post: 13189, member: 3917"]
Leider kenne ich keine Lösung nur mit PHP/HTML/CSS aber mit Javascript und der fetch-API geht es auf jeden Fall:
[CODE]
    <button class="download-btn" data-imgurl="images/dia0.jpg">Bild 1 herunter laden</button>
    <button class="download-btn" data-imgurl="images/dia1.jpg">Bild 2 herunter laden</button>
    <button class="download-btn" data-imgurl="images/dia2.jpg">Bild 3 herunter laden</button>
    
    <img id="busy-img" src="images/star3.png">
    <script src="js/FileSaver.js"></script>
    <script>
        const theBusyImg = document.getElementById('busy-img');
        function downloadIt(event) {
            // Das Bild, das die Aktivität anzeigt, sichtbar machen:
            theBusyImg.style.display = 'inline';
            // URL des Bides aus dem data-Attribut bereit stellen
            imgUrl = event.target.dataset['imgurl'];
            // Die aktuelle Datei mit fetch herunter laden:
            fetch(imgUrl).then(response => {
                if (!response.ok) {
                    throw Error(response.statusText);
                }
                return response.blob();
            }).then(blob => {
                // Der Parameter blob enthält die herunter geladene Datei.
                // Wir speichern sie im lokalen Dateisystem:
                saveAs(blob, imgUrl, {});
                theBusyImg.style.display = 'none';
            }).catch(function (error) {
                console.log(error);
            });
        }
        window.addEventListener('click', event => {
            if (event.target.classList.contains('download-btn')) {
                downloadIt(event);
            }
        });
    </script>
[/CODE]
Die Funktion saveAs wird durch dieses Skript bereit gestellt:
[URL]https://github.com/eligrey/FileSaver.js/[/URL]
[/QUOTE]

Authentifizierung