Datei mit jQuery herunterladen


113

Wie kann ich einen Benutzer zum Herunterladen auffordern, wenn er auf einen Link klickt?

Zum Beispiel anstelle von:

<a href="uploads/file.doc">Download Here</a>

Ich könnte benutzen:

<a href="#">Download Here</a>

 $('a').click... //Some jquery to download the file

Auf diese Weise indiziert Google meine HREFs und privaten Dateien nicht.

Kann dies mit jQuery gemacht werden, wenn ja, wie? Oder sollte dies stattdessen mit PHP oder so gemacht werden?


Antworten:


165

Ich könnte dies als eine anmutigere, erniedrigende Lösung vorschlagen, indem ich Folgendes verwende preventDefault:

$('a').click(function(e) {
    e.preventDefault();  //stop the browser from following
    window.location.href = 'uploads/file.doc';
});

<a href="no-script.html">Download now!</a>

Selbst wenn es kein Javascript gibt, erhält der Benutzer zumindest auf diese Weise ein Feedback.


20
jQuery ist die Antwort.
Esteban Küber

Danke, das habe ich gesucht. Normalerweise benutze ich "verhindernDefault", habe es oben einfach weggelassen, weil ich faul war. ;-)
Dodinas

2
Funktioniert hervorragend, aber es treten einige MIME-Fehler auf. Neugierig, ob es Möglichkeiten gibt, an ihnen vorbei zu kommen?
Nathan Hangen

2
Haben Sie die Warnung vom Typ MIME gelöst? Ich erhalte die Meldung "Ressource als Dokument interpretiert, aber mit MIME-Typ übertragen ...". Vielen Dank.
user1824269

22

Wenn Sie nicht möchten, dass Suchmaschinen bestimmte Dateien indizieren, können Sie robots.txt verwenden , um Webspinnen anzuweisen, nicht auf bestimmte Teile Ihrer Website zuzugreifen.

Wenn Sie sich nur auf Javascript verlassen, können einige Benutzer, die ohne Javascript surfen, nicht auf Ihre Links klicken.


1
Gut zu wissen über die 'robots.txt'. Danke dir.
Dodinas

@Rob, Wenn die URLs "privat" sein sollen, robots.txtwürde dies nicht helfen, da sie weiterhin im Browserverlauf und auf den Zwischenservern gespeichert sind.
Pacerier

3
6 Jahre später: Surfen ohne Javascript? - Nun, Sie könnten stattdessen auch spazieren gehen.
low_rents

fast 10 Jahre später: gleich! oder ?
toing_toing

18

Hier ist ein schöner Artikel, der viele Möglichkeiten zum Ausblenden von Dateien vor Suchmaschinen zeigt:

http://antezeta.com/news/avoid-search-engine-indexing

JavaScript ist kein guter Weg, um eine Seite nicht zu indizieren. Es wird Benutzer nicht daran hindern, direkt auf Ihre Dateien zu verlinken (und sie somit Crawlern zugänglich zu machen), und wie Rob erwähnte, würde dies nicht für alle Benutzer funktionieren.
Eine einfache Lösung besteht darin, das rel="nofollow"Attribut hinzuzufügen , obwohl es ohne robots.txt nicht vollständig ist.

<a href="uploads/file.doc" rel="nofollow">Download Here</a>

2
Hier ist ein weiterer Artikel der Google-Hilfe für Webmaster, der mir sehr hilft, die Relation "nofollow" oder "me" zu verstehen.
000

12

Ja, Sie müssten die Datei window.location.href in die URL der Datei ändern, die Sie herunterladen möchten.

window.location.href = 'http://www.com/path/to/file';

Was ist, wenn die Dateierweiterung .html ist, anstatt sie herunterzuladen, wird sie zu dieser HTML-Datei umgeleitet
Kaleem Nalband

9
 var link=document.createElement('a');
 document.body.appendChild(link);
 link.href=url;
 link.click();

Kein Fehler, nur der Download wurde nicht gestartet. Ich denke, es fehlt vielleicht irgendwann ein Punkt, an dem ich ein Element erstelle.
Shyammakwana.me

Überprüfen Sie in Ihrem HTML, ob ein Element <a> erstellt wurde oder nicht, und überprüfen Sie Ihren Dateilink.
EL missaoui habib

Ein Etikett war dort im Körper. und durch manuelles Klicken wird das Bild heruntergeladen. Allerdings wird es jetzt nicht benötigt. Ich habe diese VanillaJS-Lösung verwendet.
Shyammakwana.me

Es gibt keinen Grund, nicht zu funktionieren, wenn der Link korrekt ist. Testen Sie den Link direkt in durchsuchen
EL missaoui habib

$('blah').each(function(){ $('body').append('<a href="'+xxx+'" download="'+dynamicname+'" />'); }) $('a').trigger('click');Ich habe das benutzt.
shitammakwana.me

7
  • Verwenden der jQuery-Funktion

        var valFileDownloadPath = 'http//:'+'your url';
    
       window.open(valFileDownloadPath , '_blank');
    

6

Indem window.location.href = 'uploads/file.doc';Sie angeben , zeigen Sie, wo Sie Ihre Dateien speichern. Sie können natürlich .htacess verwenden, um das erforderliche Verhalten für gespeicherte Dateien zu erzwingen, aber dies ist möglicherweise nicht immer eine Handvoll.

Es ist besser, eine serverseitige PHP-Datei zu erstellen und diesen Inhalt darin abzulegen:

header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename='.$_REQUEST['f']);
readfile('../some_folder/some_subfolder/'.$_REQUEST['f']); 
exit;

Dieser Code gibt JEDE Datei als Download zurück, ohne anzuzeigen, wo Sie sie tatsächlich speichern.

Sie öffnen diese PHP-Datei über window.location.href = 'scripts/this_php_file.php?f=downloaded_file';


Diese Lösung hat mir geholfen, die Downloadprobleme auf meiner Website zu beheben, danke!
Denniz

3

Versteckte Iframes können helfen


var redeemFrame = document.createElement ("iframe"); var src = "doDownload.php"; redeemFrame.setAttribute ("src", src); redeemFrame.setAttribute ("style", "display: none"); document.body.appendChild (redeemFrame);
DarthRez

3

Ich schlage vor, Sie verwenden das Mousedown-Ereignis, das VOR dem Klickereignis aufgerufen wird. Auf diese Weise behandelt der Browser das Klickereignis auf natürliche Weise, wodurch jegliche Code-Verrücktheit vermieden wird:

(function ($) {


    // with this solution, the browser handles the download link naturally (tested in chrome and firefox)
    $(document).ready(function () {

        var url = '/private/downloads/myfile123.pdf';
        $("a").on('mousedown', function () {
            $(this).attr("href", url);
        });

    });
})(jQuery);

0

Einen ähnlichen Beitrag zur Verwendung von jQuery zum Löschen von Formularen finden Sie hier: Zurücksetzen eines mehrstufigen Formulars mit jQuery

Möglicherweise tritt auch ein Problem auf, bei dem die Werte vom Wertestapel der Streben neu gefüllt werden. Mit anderen Worten, Sie senden Ihr Formular, tun alles in der Aktionsklasse, löschen jedoch nicht die zugehörigen Feldwerte in der Aktionsklasse. In diesem Szenario scheint das Formular die zuvor übermittelten Werte beizubehalten. Wenn Sie diese auf irgendeine Weise beibehalten, setzen Sie einfach jeden Feldwert in Ihrer Aktionsklasse nach dem Fortbestehen und vor der Rückgabe von SUCCESS auf Null.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.