Datei herunterladen mit JavaScript/jQuery

Question

Ich habe eine sehr ähnliche Anforderung spezifiziert ici .

Ich möchte, dass der Browser des Benutzers einen Download manuell startet, wenn $('a#someID').click();

Aber ich kann die window.href Methode, da sie den aktuellen Seiteninhalt durch die Datei ersetzt, die Sie herunterzuladen versuchen.

Stattdessen möchte ich den Download in einem neuen Fenster/Tab öffnen. Wie ist das möglich?

Answer 1

Verwenden Sie eine unsichtbare <iframe> :

<iframe id="my_iframe" style="display:none;"></iframe>
<script>
function Download(url) {
    document.getElementById('my_iframe').src = url;
};
</script>

Um den Browser zu zwingen, eine Datei herunterzuladen, die er sonst auch darstellen könnte (z. B. HTML- oder Textdateien), muss der Server die Datei MIME-Typ auf einen unsinnigen Wert, wie zum Beispiel application/x-please-download-me oder alternativ application/octet-stream die für beliebige Binärdaten verwendet wird.

Wenn Sie sie nur in einer neuen Registerkarte öffnen wollen, kann dies nur geschehen, indem der Benutzer auf einen Link mit seinem target Attribut gesetzt auf _blank .

In jQuery:

$('a#someID').attr({target: '_blank', 
                    href  : 'http://localhost/directory/file.pdf'});

Wenn Sie auf diesen Link klicken, wird die Datei in einem neuen Tab/Fenster heruntergeladen.

Answer 2

Update 2019 für moderne Browser

Dies ist der Ansatz, den ich jetzt empfehlen würde, allerdings mit einigen Vorbehalten:

• Ein relativ moderner Browser ist erforderlich

• Wenn die Datei erwartet wird, dass sie sehr groß sollten Sie wahrscheinlich etwas Ähnliches wie den ursprünglichen Ansatz (iframe und Cookie) tun, weil einige der unten genannten Operationen wahrscheinlich Systemspeicher verbrauchen könnten, der mindestens so groß ist wie die heruntergeladene Datei und/oder andere interessante CPU-Nebeneffekte.

  fetch('https://jsonplaceholder.typicode.com/todos/1') .then(resp => resp.blob()) .then(blob => { const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; // the filename you want a.download = 'todo-1.json'; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); alert('your file has downloaded!'); // or you know, something with better UX... }) .catch(() => alert('oh no!'));

2012 ursprünglicher jQuery/iframe/cookie-basierter Ansatz

Ich habe die jQuery Dateidownload-Plugin ( Demo ) ( GitHub ), die auch in Ihrer Situation helfen könnten. Es funktioniert ziemlich ähnlich mit einem iframe, hat aber einige coole Funktionen, die ich ganz praktisch gefunden habe:

• Sehr einfach einzurichten mit schöner Optik (jQuery UI Dialog, aber nicht erforderlich), alles ist auch getestet

• Der Benutzer verlässt nie dieselbe Seite, von der aus er den Dateidownload gestartet hat. Diese Funktion ist für moderne Webanwendungen immer wichtiger

• successCallback- und failCallback-Funktionen ermöglichen es Ihnen, genau festzulegen, was der Benutzer in den beiden Situationen sieht

• In Verbindung mit jQuery UI kann ein Entwickler auf einfache Weise ein Modal anzeigen, das dem Benutzer mitteilt, dass ein Dateidownload stattfindet, das Modal nach Beginn des Downloads auflösen oder den Benutzer sogar auf freundliche Weise darüber informieren, dass ein Fehler aufgetreten ist. Siehe die Demo für ein entsprechendes Beispiel. Hoffentlich hilft das jemandem!

Hier ist ein einfaches Anwendungsbeispiel für das Plugin 根源 mit Versprechungen. Die Demo-Seite enthält auch viele andere Beispiele für "bessere UX".

$.fileDownload('some/file.pdf')
    .done(function () { alert('File download a success!'); })
    .fail(function () { alert('File download failed!'); });

Answer 3

function downloadURI(uri, name) 
{
    var link = document.createElement("a");
    // If you don't know the name or want to use
    // the webserver default set name = ''
    link.setAttribute('download', name);
    link.href = uri;
    document.body.appendChild(link);
    link.click();
    link.remove();
}

Prüfen Sie, ob Ihr(e) Zielbrowser das obige Snippet reibungslos ausführen kann:
http://caniuse.com/#feat=download

Answer 4

Ich bin überrascht, dass noch nicht viele Leute das Download-Attribut für ein Element kennen. Bitte helfen Sie mit, es bekannt zu machen! Sie können einen versteckten HTML-Link haben und einen Klick darauf vortäuschen. Wenn der HTML-Link das Download-Attribut hat, wird die Datei heruntergeladen, nicht angezeigt, egal was passiert. Hier ist der Code. Er lädt ein Katzenbild herunter, wenn er es finden kann.

document.getElementById('download').click();

<a href="https://docs.google.com/uc?id=0B0jH18Lft7ypSmRjdWg1c082Y2M" download id="download" hidden></a>

Anmerkung: Dies wird nicht von allen Browsern unterstützt: http://www.w3schools.com/tags/att_a_download.asp

Answer 5

Ich empfehle die Verwendung von die download 属性 zum Herunterladen anstelle von jQuery:

<a href="your_link" download> file_name </a>

Dadurch wird Ihre Datei heruntergeladen, ohne sie zu öffnen.