Zwei Möglichkeiten zum Implementieren einer HTML-Seite: Klicken Sie auf „Datei herunterladen“

1. Verwenden Sie das Tag <a> zum Vervollständigen

<a href="/user/test/xxxx.txt" download="Dateiname.txt">Zum Herunterladen klicken</a>

Auf diese Weise wird die Datei direkt heruntergeladen, wenn der Benutzer den Browser öffnet und auf den Link klickt.

Es gibt jedoch eine Situation, in der beispielsweise Dateien wie txt, png, jpg usw., deren direktes Öffnen der Browser unterstützt, die Download-Aufgabe nicht ausführen, sondern die Datei direkt öffnen. In diesem Fall müssen Sie dem a-Tag ein Attribut „download“ hinzufügen.

Nachfolgend sehen Sie ein Beispiel

Wechseln Sie zum Tag <a>, um den Dateipfad anzuzeigen, und vervollständigen Sie den Dateipfad entsprechend der Pfadangabe.

<!DOCTYPE html>  
<html>  
    <Kopf>  
        <meta charset="UTF-8">  
        <Titel></Titel>  
    </Kopf>  
    <Text>  
        <a href="321.png" download="test.png">Zum Herunterladen klicken</a>    
    </body>  
</html>

Wenn Sie Bilder herunterladen müssen, die von einer Webseite hochgeladen wurden, können Sie die folgenden Methoden verwenden

Holen Sie sich den Host-Domänennamen:

Standort.Hostname

Holen Sie sich die Portnummer:

Standort.Port

2. Verwenden Sie Schaltflächen zur Überwachung

Die Tastenüberwachung kann in zwei Methoden unterteilt werden.

Eines davon ist window.open()

var $eleBtn1 = $("#btn1");  
        var $eleBtn2 = $("#btn2");  
        //Eine bekannte Backend-Schnittstelle zum Herunterladen von Dateien: https://codeload.github.com/douban/douban-client/legacy.zip/master  
        //Methode 1: window.open()  
        $eleBtn1.click(Funktion(){  
            Fenster.öffnen("https://codeload.github.com/douban/douban-client/legacy.zip/master");  
        });

Zweitens, Formularübermittlung

//Methode 2: Durch Formular  
        $eleBtn2.click(Funktion(){  
            var $eleForm = $("<form method='get'></form>");  
            $eleForm.attr("Aktion","https://codeload.github.com/douban/douban-client/legacy.zip/master");  
            $(document.body).anhängen($eleForm);  
            //Senden Sie das Formular zum Herunterladen $eleForm.submit();  
        });

Zusammenfassen

Oben sind zwei Methoden zum Implementieren von Click-to-Download-Dateien auf HTML-Seiten, die ich Ihnen vorgestellt habe. Ich hoffe, sie sind hilfreich für Sie. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!

<<: Erfahren Sie mehr über die MySQL-Speicher-Engine

>>: Detaillierte Erklärung zur Verwendung des Feldsatzes und der Legende für seltene Tags

So deinstallieren Sie Docker Toolbox vollständig

Bezüglich des Problems der Verwendung von Webpack-Anweisungen in VSCode, das anzeigt: „Weil das Ausführen von Skripten in diesem System verboten ist“ (perfekte Lösung)

Wenn ich Vue lerne und immer Webpack-Anweisungen ...

Zwei Möglichkeiten zum Implementieren einer HTML-Seite: Klicken Sie auf „Datei herunterladen“

So deinstallieren Sie Docker Toolbox vollständig

Erfahrung im Selbststudium von CSS-Optimierungsfähigkeiten

Nginx-Beispielcode zur Implementierung dynamischer und statischer Trennung

HTML5 und jQuery zum Implementieren von Vorschau-Codebeispielen vor dem Hochladen lokaler Bilder

Einfaches Setup von VMware ESXi6.7 (mit Bildern und Text)

Eine kurze Diskussion über Schreibregeln für Docker Compose

4 Prinzipien für sauberes und schönes Webdesign

Erfahren Sie in 3 Minuten, wie Sie den Supervisor Watchdog verwenden

Detaillierte Erläuterung des Lazy Loading und Preloading von Webpack

Informationen zum Textumbruchproblem bei IE-Labels (LI)

Artikel empfehlen

Vue implementiert ein einfaches Einkaufswagenbeispiel

Detaillierte Erklärung zur Verwendung der ziehbaren Textfeldkomponente von Vue.js

Integrationspraxis des Vue+Element-Hintergrundverwaltungsframeworks

Welche Vorteile bietet die Verwendung des B+-Baumindex in MySQL?

So zeigen Sie die Netzwerkroutingtabelle in Ubuntu an

So zeigen Sie den Startparameterbefehl „Docker Run“ an (empfohlen)

So richten Sie eine VSCode-Remoteverbindung zum Server-Docker-Container ein

Informationen zur Docker-Sicherheit Probleme mit der Docker-TLS-verschlüsselten Kommunikation

Bezüglich des Problems der Verwendung von Webpack-Anweisungen in VSCode, das anzeigt: „Weil das Ausführen von Skripten in diesem System verboten ist“ (perfekte Lösung)

Grafisches Tutorial zur Installation der grünen Version von MySql 5.6.36 (64-Bit)

So führen Sie in MySQL eine Abfrage-Zwischenspeicherung durch und beheben Fehler

Erläuterung der Regeln zum Standortabgleich für die Nginx-Konfiguration (Beispiel)

HTML Mehrere spezielle Trennlinieneffekte

Analyse der Gründe, warum MySQL-Felddefinitionen nicht null verwenden sollten

Vue implementiert horizontal abgeschrägtes Balkendiagramm