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

Beispiel für das Klicken, um eine Datei auf einer HTML-Seite herunterzuladen

小云云
小云云Original
2018-03-03 10:02:302110Durchsuche

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=&#39;get&#39;></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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn