downloaded data file from ajax

Question

I am trying to initiate a file download through ajax. I can retrieve the data from the server, but cannot get the browser to open the data. I can't just point the browser's location.href at the endpoint url.

the resource I want to download is being exposed through an endpoint that requires custom http headers, and an authentication bearer token. I cannot change the backend api to allow cookies. Therefore, I cannot just open the url with window.open(url,'_blank')

I can make an ajax request to the endpoint, but I don't know how to download file after I get the response.

$.get( "restAPI/file.pdf", function( data ) {
var w = window.open(null,'_blank')
$(w.document.body).html(data);
});

Does not work either

I was hoping to do something similar to

var w = window.open(data,'_blank')

but that does not work either.

EDIT

The solution, thanks to joyBlanks

   $http({method: 'GET',
                    responseType:'arraybuffer',
                    headers: {
                        Accept: 'application/octet-stream',                 
                    }, url:url         }
    ).then(function(data) {
                var blob = new Blob([data.data]);

                if (window.navigator.msSaveBlob)
                    window.navigator.msSaveBlob(blob, filename);
                else {                  
                    var link = document.createElement('a');
                    link.id = filename;
                    link.href = window.URL.createObjectURL(blob);
                    link.download = filename;
                    link.click();
                }
});

Authentication information can be put in the URL: `http://username:password@servername/path` — Barmar, Sep 22 '15 at 19:47
Correct me if I'm wrong, but it seems like you are asking how to display the data returned by the server. Maybe you can try something like this `document.getElementById("elementToWrite").innerHTML = JSON.stringify(data, null, 4); ` after the ajax returns the data from the server. — user2879041, Sep 22 '15 at 19:48
Not bearer token authentication, just basic/digest. Also, I have to pass other custom headers to the endpoint as well — Andy N, Sep 22 '15 at 19:48
$.get is not going to work, I belive it is limited to objects/strings/json/xml. Probably will not work with .pdf. @Barmar made a good point. — Mark, Sep 22 '15 at 19:49
Thanks @AndyN this worked for me. (after I noticed the `responseType:'arraybuffer'` that is!) — hofnarwillie, Mar 03 '16 at 11:26

joyBlanks · Accepted Answer · 2015-09-22T19:53:09.723

Modern browsers support the download attribute for the <a> tag.

This attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource so that when the user clicks on the link they will be prompted to save it as a local file. If the attribute has a value, the value will be used as the pre-filled file name in the Save prompt that opens when the user clicks on the link (the user can change the name before actually saving the file of course). There are no restrictions on allowed values (though / and \ will be converted to underscores, preventing specific path hints), but you should consider that most file systems have limitations with regard to what punctuation is supported in file names, and browsers are likely to adjust file names accordingly.

Note: Can be used with blob: URLs and data: URLs, to make it easy for users to download content that is generated programmatically using JavaScript (e.g. a picture created using an online drawing Web app). If the HTTP header Content-Disposition: is present and gives a different filename than this attribute, the HTTP header has priority over this attribute. If this attribute is present and Content-Disposition: is set to inline, Firefox gives priority to Content-Disposition, like for the filename case, while Chrome gives priority to the download attribute. This attribute is only honored for links to resources with the same-origin.

<a download src="restAPI/file.pdf">Download File</a>

So when you click the a tag it will show a popup that will download the file. From the request I can see that the file is already available.

You can read about it more : https://developer.mozilla.org/en/docs/Web/HTML/Element/a

Thanks, I think this is what I am looking for, I will create a new element with the blob as the data, and click it with jquery — Andy N, Sep 22 '15 at 19:52

score 0 · Answer 2 · edited May 23 '17 at 12:23

You won't be able to save the file from javascript. I would recommend you create an an API call that calls the restAPI and saves a temp file on your webserver. Then return the temp file name to the javascript and redirect to it. The browser should them prompt the user to open or save. Here is another post that has more details on this approach: Web Api won't download file using jQuery Ajax and Basic Auth

downloaded data file from ajax

2 Answers2