Pobierz pliki binarne z Javascriptem

Question

Chcę pobierać pliki binarne za pomocą Javascript.

Mam usługę REST, która zwraca dane binarne i chcę wiedzieć, czy możliwe jest wyświetlenie pliku binarnego, w zależności od rozszerzenia pliku.

To jest mój bieżący kod:

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

Dzięki!

Answer 1

Zobacz artykuł MDN na stronie XMLHttpRequest.

Jeśli ustawisz reakcję XMLHttpRequest do ArrayBuffer można wykonać następujące czynności:

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

Opcja 2:
Można użyć Blob jako odpowiedź na XMLHttpRequest. A potem może zapisać go w systemie plików (FileSystem API)

może wyglądać następująco:

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

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

Wariant 3:
Jeśli chcesz tylko pobrać i „show” obrazów łatwo można to zrobić tak:

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