Heim > Artikel > Web-Frontend > Zwei Möglichkeiten, Click-to-Download-Dateien auf HTML-Seiten zu implementieren
Zwei Möglichkeiten, Click-to-Download-Dateien auf HTML-Seiten zu implementieren
- 不言Original
- 2018-06-05 11:51:504040Durchsuche
In diesem Artikel werden hauptsächlich zwei Möglichkeiten zum Implementieren von Click-to-Download-Dateien auf HTML-Seiten vorgestellt.
Verwenden Sie das 3499910bf9dac5ae3c52d5ede7383485 vollständig
<a href="/user/test/xxxx.txt" download="文件名.txt">点击下载</a>
Auf diese Weise wird die Datei direkt heruntergeladen, wenn der Benutzer den Browser öffnet und auf den Link klickt.
Aber es gibt eine Situation, in der z. B. TXT-, PNG-, JPG- und andere Dateien, deren direktes Öffnen der Browser unterstützt, die Download-Aufgabe nicht ausführen, sondern die Datei zu diesem Zeitpunkt direkt öffnen um ein Tag-Attribut „download“ hinzuzufügen;
Das Folgende ist ein Beispiel
Gehen Sie zum anzuzeigenden Label 3499910bf9dac5ae3c52d5ede7383485 Geben Sie den Dateipfad ein und befolgen Sie die Pfadanweisungen. Vervollständigung des Dateipfads
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="321.png" download="test.png">点击下载</a>
</body>
</html>
Wenn Sie das auf der Webseite hochgeladene Bild herunterladen müssen, können Sie Folgendes verwenden Methode
, um den Hostdomänennamen zu erhalten:
location.hostname
Portnummer abrufen:
location.port
2. Verwenden Sie die Schaltfläche zum Zuhören
Die Schaltflächenüberwachung kann in zwei Methoden unterteilt werden:
Eine 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:
Einführung in die Verwendung von Ankerpunkten (benannte Anker) in HTML-Webseiten
Das obige ist der detaillierte Inhalt vonZwei Möglichkeiten, Click-to-Download-Dateien auf HTML-Seiten zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!