Ich habe eine sehr ähnliche Anforderung hier angegeben .
Ich muss den Browser des Benutzers manuell starten lassen, wenn $('a#someID').click();
Ich kann die window.href
Methode jedoch nicht verwenden , da sie den aktuellen Seiteninhalt durch die Datei ersetzt, die Sie herunterladen möchten.
Stattdessen möchte ich den Download in einem neuen Fenster / Tab öffnen. Wie ist das möglich?
javascript
jquery
download
Mithun Sreedharan
quelle
quelle
Antworten:
Verwenden Sie ein unsichtbares
<iframe>
:Um den Browser zum Herunterladen einer Datei zu zwingen, die er sonst rendern könnte (z. B. HTML- oder Textdateien), muss der Server den MIME-Typ der Datei auf einen unsinnigen Wert festlegen , z. B.
application/x-please-download-me
oder alternativapplication/octet-stream
, der für eine beliebige Binärdatei verwendet wird Daten.Wenn Sie es nur in einer neuen Registerkarte öffnen möchten, können Sie dies nur tun, indem Sie auf einen Link klicken, dessen
target
Attribut auf gesetzt ist_blank
.In jQuery:
Wenn Sie auf diesen Link klicken, wird die Datei in einem neuen Tab / Fenster heruntergeladen.
quelle
iframe.style.display = 'none';
wird der Iframe vollständig ausgeblendet. Ihre aktuelle Implementierung macht den Iframe unsichtbar, aber der Iframe nimmt weiterhin Platz am unteren Rand der Seite ein und verursacht zusätzlichen Leerraum.Content-Disposition: attachment; filename="downloaded.pdf"
(Sie können den Dateinamen natürlich nach Bedarf anpassen).2019 Update moderner Browser
Dies ist der Ansatz, den ich jetzt mit ein paar Einschränkungen empfehlen würde:
2012 ursprünglicher jQuery / iframe / cookie-basierter Ansatz
Ich habe das jQuery File Download Plugin ( Demo ) ( GitHub ) erstellt, das auch in Ihrer Situation helfen kann. Es funktioniert ziemlich ähnlich mit einem Iframe, hat aber einige coole Funktionen, die ich als sehr praktisch empfunden habe:
Sehr einfach mit netter Grafik einzurichten (jQuery UI Dialog, aber nicht erforderlich), alles wird auch getestet
Der Benutzer verlässt niemals dieselbe Seite, von der er einen Dateidownload initiiert hat. Diese Funktion wird für moderne Webanwendungen immer wichtiger
Mit den Funktionen successCallback und failCallback können Sie explizit angeben, was der Benutzer in beiden Situationen sieht
In Verbindung mit der jQuery-Benutzeroberfläche kann ein Entwickler dem Benutzer auf einfache Weise ein Modal anzeigen, das angibt, dass ein Dateidownload stattfindet, das Modal nach dem Start des Downloads auflösen oder den Benutzer sogar freundlich darüber informieren, dass ein Fehler aufgetreten ist. Ein Beispiel hierfür finden Sie in der Demo . Hoffe das hilft jemandem!
Hier ist eine einfache Anwendungsfall-Demo unter Verwendung der Plugin- Quelle mit Versprechungen. Die Demoseite enthält auch viele andere, bessere UX-Beispiele.
quelle
Überprüfen Sie, ob Ihre Zielbrowser das obige Snippet reibungslos ausführen:
http://caniuse.com/#feat=download
quelle
document.body.appendChild(link)
vor dem Klicken und nach dem Klicken tunlink.remove()
, um eine Verschmutzung des DOM zu vermeiden.link.download = ""
, dass der ursprüngliche Dateiname beibehalten wird und Sie keinen festlegen müssen.Ich bin überrascht, dass nicht viele Leute über das Download-Attribut für ein Element Bescheid wissen. Bitte helfen Sie mit, das Wort darüber zu verbreiten! Sie können einen versteckten HTML-Link haben und einen Klick darauf fälschen. Wenn der HTML-Link das Download-Attribut hat, lädt er die Datei herunter und zeigt sie nicht an, egal was passiert. Hier ist der Code. Es wird ein Katzenbild heruntergeladen, wenn es es finden kann.
Hinweis: Dies wird nicht in allen Browsern unterstützt: http://www.w3schools.com/tags/att_a_download.asp
quelle
mp4
s heruntergeladenIch empfehle, das
download
Attribut anstelle von jQuery zum Herunterladen zu verwenden:Dadurch wird Ihre Datei heruntergeladen, ohne sie zu öffnen.
quelle
Wenn Sie jQuery bereits verwenden, können Sie es nutzen, um ein kleineres Snippet zu erstellen.
Eine jQuery-Version von Andrews Antwort:
quelle
if
Aussage sollte wirklich sein:if( $idown && $idown.length > 0 )
Funktioniert unter Chrome, Firefox und IE8 und höher.
quelle
url
und nicht von diesem heruntergeladen.Einfaches Beispiel mit einem
iframe
Rufen Sie dann einfach die Funktion auf, wo immer Sie möchten:
downloadURL('path/to/my/file');
quelle
Dies kann hilfreich sein, wenn Sie nicht auf einer anderen Seite navigieren müssen. Dies ist eine Basis-Javascript-Funktion, die auf jeder Plattform verwendet werden kann, auf der sich das Backend in Javascript befindet
quelle
Nur sieben Jahre später kommt hier eine einzeilige jQuery-Lösung, die ein Formular anstelle eines Iframes oder Links verwendet:
Ich habe das in getestet
Wenn jemand Nachteile dieser Lösung kennt, würde ich mich sehr freuen, davon zu hören.
Vollständige Demo:
quelle
filePath
einen Querystring haben, da beim Senden eines Formulars der Querystring im Aktionsattribut überschrieben wird.var authInput = $("<input>").attr("type", "hidden").attr("name", "myQsKey").val('MyQsValue');
$('<form></form>') .attr('action', filePath) .append($(authInput)) .appendTo('body').submit().remove();
Dies ist eine äquivalente Antwort:filepath?myQsKey=myValue
window.location
zu seinfilePath
. Nurwindow.location = filePath;
würde das gleiche tun.download
Attribut nicht auf diese Weise verwenden, um dem Browser mitzuteilen, dass Sie einen Download wünschen, unabhängig davon, welche Header der Server zurückgibt, was Sie mit einema
Element tun können .)Ich weiß nicht, ob die Frage einfach zu alt ist, aber das Festlegen von window.location auf eine Download-URL funktioniert, solange der Download-MIME-Typ korrekt ist (z. B. ein Zip-Archiv).
quelle
Am Ende habe ich das folgende Snippet verwendet und es funktioniert in den meisten Browsern, allerdings nicht im IE getestet.
Aktualisieren
quelle
MouseEvent
hier zu verwenden, anstatt immer zu verwendenclick
? Und warum den Link an das Dokument anhängen, bevor Sie darauf klicken? Vielleicht hat dies Vorteile gegenüber dem einfacheren Ansatz, der in stackoverflow.com/a/23013574/1709587 gezeigt wird , aber wenn ja, werden sie hier nicht erklärt.Um die Antwort von Imagine Breaker zu verbessern, wird dies von FF & IE unterstützt:
Mit anderen Worten, verwenden Sie einfach eine
dispatchEvent
Funktion anstelle vonclick()
;quelle
Lassen Sie Ihr Javascript möglicherweise nur eine Seite öffnen, auf der nur eine Datei heruntergeladen wird, z. B. wenn Sie einen Download-Link auf einen neuen Tab ziehen:
Öffnen Sie bei geöffnetem Fenster eine Download-Seite, die automatisch geschlossen wird.
quelle
Es folgt der vollständigste und funktionsfähigste (getestete) Code zum Herunterladen von Daten für FireFox-, Chrome- und IE-Code. Angenommen, die Daten befinden sich im Texarea- Feld mit der ID = 'textarea_area' und der Dateiname ist der Name der Datei, in die die Daten heruntergeladen werden.
und dann einfach anrufen
Zum Herunterladen initiieren.
Das Array zum Einstellen des richtigen MIME-Typs für den Download-Dialog kann wie folgt sein:
quelle
für mich funktioniert das ok getestet in chrome v72
quelle
Ich habe gute Ergebnisse mit der Verwendung eines FORM-Tags erzielt, da es überall funktioniert und Sie keine temporären Dateien auf dem Server erstellen müssen. Die Methode funktioniert so.
Auf der Clientseite (Seiten-HTML) erstellen Sie ein unsichtbares Formular wie dieses
Dann fügen Sie diesen Javascript-Code zu Ihrer Schaltfläche hinzu:
Auf der Serverseite haben Sie folgenden PHP-Code
download.php
:Sie können sogar Zip-Dateien Ihrer Daten wie folgt erstellen:
Das Beste daran ist, dass keine Restdateien auf Ihrem Server verbleiben, da alles im laufenden Betrieb erstellt und zerstört wird!
quelle
Die Antwort von Hitesh am 30. Dezember 13 funktioniert tatsächlich. Es muss nur ein wenig angepasst werden:
Die PHP-Datei kann sich selbst aufrufen. Mit anderen Worten, erstellen Sie einfach eine Datei mit dem Namen saveAs.php und fügen Sie diesen Code ein ...
quelle
Diese Funktionen werden in stacktrace.js verwendet :
quelle
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 jede Verrücktheit des Codes vermieden wird:
quelle
Hervorragende Lösung von Corbacho, ich habe mich gerade angepasst, um die Var loszuwerden
quelle
Firefox und Chrome getestet:
Dies ist eigentlich die "Chrome" -Lösung für Firefox (ich habe sie nicht in anderen Browsern getestet, bitte hinterlassen Sie Kommentare zur Kompilierbarkeit).
quelle
Es gibt so viele kleine Dinge, die beim Herunterladen einer Datei passieren können. Die Inkonsistenz zwischen Browsern allein ist ein Albtraum. Am Ende habe ich diese tolle kleine Bibliothek benutzt. https://github.com/rndme/download
Das Schöne daran ist, dass es nicht nur für URLs, sondern auch für clientseitige Daten, die Sie herunterladen möchten, flexibel ist.
quelle
Mit Ankertag und PHP ist dies möglich. Überprüfen Sie diese Antwort
JQuery Ajax fordert zum Herunterladen von PDF-Dateien auf
Ich überprüfe die Dateigröße, denn wenn Sie PDF von der CDN-Cloudfront laden, erhalten Sie nicht die Größe des Dokuments, wodurch das Dokument in 0 KB heruntergeladen werden muss. Um dies zu vermeiden, überprüfe ich diese Bedingung
quelle
Ich weiß, dass ich zu spät zur Party komme, aber ich möchte meine Lösung teilen, die eine Variation der obigen Lösung von Imagine Breaker ist. Ich habe versucht, seine Lösung zu verwenden, weil mir seine Lösung am einfachsten und leichtesten erscheint. Aber wie andere gesagt haben, hat es bei einigen Browsern nicht funktioniert, deshalb habe ich es mit jquery variiert.
Hoffe das könnte jemandem da draußen helfen.
quelle
window.location.href = url
. Der von Ihnen erstellte Link wird für nichts verwendet.Hinweis: Wird nicht in allen Browsern unterstützt.
Ich suchte nach einer Möglichkeit, eine Datei mit jquery herunterzuladen, ohne von Anfang an die Datei-URL im href-Attribut festlegen zu müssen.
quelle
Ich verwende die Lösung von @ rakaloof ohne JQuery (weil Sie sie hier nicht benötigen ). Danke für die Idee! Hier ist eine formularbasierte Lösung von vanillaJS:
quelle