Download Binärdateien mit Javascript

Question

Ich möchte Binärdateien mit Javascript herunterladen.

Ich habe einen REST-Service, der die Binärdaten zurückgibt, und ich möchte wissen, ob es möglich ist, die Binärdatei anzuzeigen, egal welche Dateierweiterung.

Dies ist mein aktueller Code:

var xhr = new XMLHttpRequest; 
xhr.open("GET", requestUrl); 
xhr.addEventListener("load", function() { 
    var ret = []; 
    var len = this.responseText.length; 
    var byte; 
    for (var i = 0; i < len; i++) { 
     byte = (this.responseText.charCodeAt(i) & 0xFF) >>> 0; 
     ret.push(String.fromCharCode(byte)); 
    } 
    var data = ret.join(''); 
    data = "data:application/pdf;base64," + btoa(data); 

    window.open(data, '_blank', 'resizable, width=1020,height=600'); 
}, false); 

xhr.setRequestHeader("Authorization", "Bearer " + client.accessToken); 
xhr.overrideMimeType("octet-stream; charset=x-user-defined;"); 
xhr.send(null); 

Dank!

Answer 1

Werfen Sie einen Blick auf den MDN Artikel auf XMLHttpRequest.

Wenn Sie die Antwort des XMLHttpRequest ArrayBuffer Sie Folgendes tun können:

var xhr = new XMLHttpRequest(); 
xhr.open("GET", requestUrl); 
xhr.responseType = "arraybuffer"; 

xhr.onload = function() { 
    if (this.status === 200) { 
     var blob = new Blob([xhr.response], {type: "application/pdf"}); 
     var objectUrl = URL.createObjectURL(blob); 
     window.open(objectUrl); 
    } 
}; 
xhr.send(); 

Option 2:
Sie könnten Blob als die Antwort des XMLHttpRequest verwenden. Und dann vielleicht ist es im Dateisystem speichern (FileSystem API)

Es kann wie folgt aussehen:

var xhr = new XMLHttpRequest(); 
xhr.open("GET", requestUrl); 
xhr.responseType = "blob"; 

xhr.onload = function() { 
    onDownloaded(this); 
}; 
xhr.send(); 

Option 3:
Wenn Sie nur herunterladen und „Show“ Bilder, die Sie dies leicht tun können wie folgt:

var img = new Image(); 

// add the onload event before setting the src 
img.onload = function() { 
    onImageDownloaded(img); 
} 

// start the download by setting the src property 
img.src = requestUrl