Zum Herunterladen klicken abzuschließen"/> Zum Herunterladen klicken abzuschließen">
Heim > Artikel > Web-Frontend > Beispiel für das Klicken, um eine Datei auf einer HTML-Seite herunterzuladen
1. Verwenden Sie das Tag , um
<a href="/user/test/xxxx.txt" download="文件名.txt">点击下载</a>
auszufüllen, sodass die Datei direkt heruntergeladen wird, wenn der Benutzer den Browser öffnet und auf den Link klickt.
Aber es gibt eine Situation, in der der Browser beispielsweise das direkte Öffnen von TXT-, PNG- und JPG-Dateien nicht ausführt, die Datei jedoch direkt öffnet um ein Tag-Attribut „download“ hinzuzufügen;
Das Folgende ist ein Beispiel
Verschieben Sie es in die Beschriftung Der Dateipfad kann angezeigt werden, und vervollständigen Sie den Dateipfad entsprechend die Pfadaufforderung
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a href="321.png" download="test.png">点击下载</a> </body> </html>
Wenn Sie Bilder von der Webseite herunterladen müssen, können Sie die folgende Methode
verwenden, um den Host-Domainnamen zu erhalten:
Standort. Hostname
um die Portnummer zu erhalten:
location.port
2. Verwenden Sie Schaltflächen zur Überwachung
Die Schaltflächenüberwachung kann in zwei Methoden unterteilt werden:
Eine davon ist window.open()
var $eleBtn1 = $("#btn1"); var $eleBtn2 = $("#btn2"); //已知一个下载文件的后端接口:https://codeload.github.com/douban/douban-client/legacy.zip/master //方法一:window.open() $eleBtn1.click(function(){ window.open("https://codeload.github.com/douban/douban-client/legacy.zip/master"); });
Die zweite ist die Formularübermittlung
//方法二:通过form $eleBtn2.click(function(){ var $eleForm = $("<form method='get'></form>"); $eleForm.attr("action","https://codeload.github.com/douban/douban-client/legacy.zip/master"); $(document.body).append($eleForm); //提交表单,实现下载 $eleForm.submit(); });
Verwandte Empfehlungen:
php-Beispielcode um Click-to-Download-Dateien auf der aktuellen Seite zu implementieren
Das obige ist der detaillierte Inhalt vonBeispiel für das Klicken, um eine Datei auf einer HTML-Seite herunterzuladen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!