2015-04-01 20 views
11

Uso questo codice per scaricare il file excel dal server.Download di file dal risultato ajax utilizzando blob

$.ajax({ 
    headers: CLIENT.authorize(), 
    url: '/server/url', 
    type: 'POST', 
    contentType: "application/json; charset=utf-8", 
    data: JSON.stringify(jsonData), 
    success: function (data) { 
     alert('Data size: ' + data.length); 
     var blob = new Blob([data], { type: "application/vnd.ms-excel" }); 
     alert('BLOB SIZE: ' + data.length); 
     var URL = window.URL || window.webkitURL; 
     var downloadUrl = URL.createObjectURL(blob); 
     document.location = downloadUrl; 
    }, 
}); 

L'esperienza problema che ho è che, anche se i dati e le dimensioni sono identiche blob, il momento document.location viene assegnato sono richiamato per scaricare almoste due volte più grande file di Excel. E quando provo ad aprirlo, Excel si lamenta del formato di file sbagliato e il file aperto contiene molti rifiuti, anche se il testo richiesto è ancora lì.

Qualche idea che cosa sta causando questo e come evitarlo?

+0

Non penso che sia una grande idea. Perché non lasciare che il server spinga il file nel browser per un normale flusso di download. Questo sembra molto innaturale, a meno che tu non abbia una ragione molto specifica per farlo, come un qualche tipo di Proxy o analisi online, ma sta andando a thrash browser memeory. – ppumkin

+0

Prova ad impostare il tipo di contenuto su 'arrayBuffer' – levi

+0

@ppumkin, sfortunatamente devo soddisfare i requisiti. Non riesco a memorizzare il file sul server e ho bisogno di passare l'intestazione di autorizzazione per ottenere il file. – SMart

risposta

27

Quindi ho risolto il problema utilizzando AJAX 2. Supporta nativamente i flussi binari. Non puoi usare jQuery per questo, a meno che base64 non codifichi tutto, apparentemente.

codice di lavoro è simile al seguente:

var xhr = new XMLHttpRequest(); 
xhr.open('POST', '/le/url', true); 
xhr.responseType = 'blob'; 
$.each(SERVER.authorization(), function(k, v) { 
    xhr.setRequestHeader(k, v); 
}); 
xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8'); 
xhr.onload = function(e) { 
    preloader.modal('hide'); 
    if (this.status == 200) { 
     var blob = new Blob([this.response], {type: 'application/vnd.ms-excel'}); 
     var downloadUrl = URL.createObjectURL(blob); 
     var a = document.createElement("a"); 
     a.href = downloadUrl; 
     a.download = "data.xls"; 
     document.body.appendChild(a); 
     a.click(); 
    } else { 
     alert('Unable to download excel.') 
    } 
}; 
xhr.send(JSON.stringify(jsonData)); 

Spero che questo aiuti.

+0

funziona per chrome/ff. Per IE, usa msSaveOrOpenBlob http://stackoverflow.com/questions/24007073/open-links-made-by-createobjecturl-in-ie11 – user2827377

+2

Funziona .. Ho provato su Chrome .. su Safari no :( – vasanth

+0

+1 per [this.response] come ottenere effettivamente il blob, stavo cercando come questa finestra.URL.createObjectURL (xhttp.response) –

Problemi correlati