2016-07-11 12 views
1

Ich versuche, eine Datei mit einem http-Link herunterladen. Dies ist der Code:Download Textdatei oder Bild werfen Javascript auf Firefox

downloadFile: function (fileName, url) { 
    var link = document.createElement('a'); 
    link.setAttribute('download', fileName); 
    link.setAttribute('type', 'application/octet-stream'); 
    link.target = '_blank'; 
    link.href = url; 

    document.body.appendChild(link); 

    link.click(); 

    document.body.removeChild(link); 
} 

Dies funktioniert auf Chrome und Edge-aber nicht auf Firefox. Wenn ich versuchte, eine Textdatei oder ein Bild herunterzuladen, öffnet der Browser eine neue Registerkarte, die den Inhalt der Datei darstellt. Ich brauche, dass der Browser das Standard-Download-Fenster öffnet.

Ist es möglich?

Dies ist ein Beispiel von URL, die ich benutze: http://localhost:17671/docstmp/528d149e37467a53faeeeb0556901d87/ToDo.txt

ich diesen jsfiddle erstellt zu demonstrieren: jsfiddle.net/hp7yod85

+0

Wäre das nicht ein normaler Download-Link funktioniert? – Jite

+0

Was ist der Zweck der Aufnahme von 'link.setAttribute ('type', 'application/octet-stream'); link.target = '_blank'; '? – guest271314

+0

Ohne das Ziel wird der Dateiinhalt auf der gleichen Seite wie meine Anwendung geöffnet. Und der Typ war ein Test, um den Download zu versuchen –

Antwort

0

Die Ressource nicht Access-Control-Allow-Origin Kopfsatz hat angefordert, und hat X-Frame-Options Kopfsatz zu SAMEORIGIN, um das Laden in Element zu verhindern.

können Sie YQL verwenden, um Inhalte abzurufen, erstellen Sie dann eine data URL von Textinhalt an zurückgegebenen Ergebnisse, dann erstellen Sie ein <a> Element mit href Satz data URL. Returns erwartete Ergebnis des Dialogs öffnet die Datei im Texteditor zu öffnen Aufforderungen oder speichern Datei auf firefox 47.

<!DOCTYPE html> 
<html> 
<body> 
    <button onclick="downloadFile()">Test</button> 
    <script> 
    function downloadFile() { 
    var request = new XMLHttpRequest(); 
    var url = 'https://query.yahooapis.com/v1/public/yql?q=' 
       + 'select * from html where ' 
       + 'url="http://www.ietf.org/rfc/bcp/bcp47.txt"&format=json&callback=' 
    request.open("GET", url); 
    request.onload = function() { 
     var data = JSON.parse(this.responseText).query.results.body.content; 
     var a = document.createElement("a"); 
     a.href = "data:text/plain," + data; 
     a.download = "bcp47.txt"; 
     document.body.appendChild(a); 
     a.click(); 
     document.body.removeChild(a); 
    } 
    request.send() 
    } 
    </script> 
</body> 
</html> 

plnkr http://plnkr.co/edit/8JBBhVwIy0Icr2MaQZif?p=preview

+0

Ich denke, das wird nicht lösen, weil ich auch große Dateien herunterladen kann, wie ein Rar mit 700mb. Sperren wie bei dieser Lösung wird der Benutzer nicht sehen, den Fortschritt aus dem Standard-Download-Fenster –

+0

Sie können 'Progress' Ereignis bei' XMLHttpRequest' Objekt, um Benutzer über den Fortschritt der Datei Download benachrichtigt werden. Original Frage erwähnt nicht das Herunterladen von 700 MB-Dateien oder "Fortschritt" -Ereignisse? – guest271314

+0

Ja, aber ich muss das Abbrechen-Ereignis auch implementieren ... Und alles wird schon vom Browser erledigt –