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

Answer 1

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 (eg 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

Answer 2

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