バイナリファイルをJavascriptでダウンロードする

Question

Javascriptを使用してバイナリファイルをダウンロードしたい。

私はバイナリデータを返すRESTサービスを持っています。バイナリファイルを表示できるかどうか、ファイル拡張子のどちらかを知りたいのですが。

これは私の現在のコードです：

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); 

ありがとう！

Answer 1

XMLHttpRequestのMDNの記事をご覧ください。

あなたは次のことを行うことができArrayBufferへのXMLHttpRequestの応答を設定した場合：

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(); 

オプション2：XMLHttpRequestをの応答として
あなたが使用することができBlobを。

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

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

オプション3：あなたは簡単にこれを行うことができます
あなただけダウンロードしたい場合や、「ショー」の画像をそして多分ファイルシステムに保存します（FileSystem API）

それは次のようになります。ように：

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