Downloading file from ajax result using blob

Question

I use this code to download excel file from server.

$.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;     }, }); 

The problem I experience is that even though data and blob sizes are identical, the moment document.location gets assigned I'm prompted to download almoste two times larger excel file. And when I try to open it, excel complains about wrong file format and opened file contains a lot of garbage, even though required text is still there.

Any ideas what is causing this and how to avoid it?

Answer 1

So I solved the problem using AJAX 2. It natively supports binary streams. You can't use jQuery for that, unless you base64 encode everything, apparently.

Working code looks like this:

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

Hope this helps.