angularjs - Download file from API using javascript - Stack Overflow

admin管理员组

文章数量:1278979

I need to force download of file using JavaScript. I am using Angular and restangular to municate with API. I am now working on file download action from API... API returns me raw bytes of that file and these headers:

Content-Disposition:attachment; filename="thefile"
Content-Length:2753

So I have raw bytes, but I do not know how to handle it to download this file to client...Can you provide me some solution of this issue? How can I handle returns response from server to open in client browser Save As dialog?

EDITED: Server does not send me content-type of the file...Also in call's headers need to be auth token so I cannot use direct open window with url.. Code is:

vm.downloadFile = function(fileId){
 var action = baseHelpers.one('files/' + fileId + '/content').get();
 action.then(function(result){});
}

I need to force download of file using JavaScript. I am using Angular and restangular to municate with API. I am now working on file download action from API... API returns me raw bytes of that file and these headers:

Content-Disposition:attachment; filename="thefile"
Content-Length:2753

So I have raw bytes, but I do not know how to handle it to download this file to client...Can you provide me some solution of this issue? How can I handle returns response from server to open in client browser Save As dialog?

EDITED: Server does not send me content-type of the file...Also in call's headers need to be auth token so I cannot use direct open window with url.. Code is:

vm.downloadFile = function(fileId){
 var action = baseHelpers.one('files/' + fileId + '/content').get();
 action.then(function(result){});
}

• javascript
• angularjs
• file
• blob
• restangular

Share Improve this question Follow edited Dec 29, 2015 at 11:07 Shanoy asked Dec 29, 2015 at 10:51 ShanoyShanoy 5511 gold badge22 silver badges77 bronze badges 6

• 2 Include your code calling the API. – T.J. Crowder Commented Dec 29, 2015 at 10:55
• Try reading this: paxcel/blog/… – zmii Commented Dec 29, 2015 at 10:56
• What's your content-type? – Andriy Ivaneyko Commented Dec 29, 2015 at 10:57
• if you use restangular you can check this example - gon.to/2013/04/09/… – Armen Commented Dec 29, 2015 at 11:00
• edited with code... content type is not being sent from api – Shanoy Commented Dec 29, 2015 at 11:08

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 4

I had an endpoint on .Net server

[HttpPost]
[Route("api/tagExportSelectedToExcel")]

and a React frontend with axios. The task was to add a button which downloads a file from this API. I spent several hours before found this solution. I hope it will be helpful for someone else.

This is what I did:

axios('/api/tagExportSelectedToExcel', {
    data: exportFilter,
    method: 'POST',
    responseType: 'blob'
}).then(res => resolveAndDownloadBlob(res));

Where resolveAndDownloadBlob:

/**
 * Resolved and downloads blob response as a file.
 * FOR BROWSERS ONLY
 * @param response
 */
function resolveAndDownloadBlob(response: any) {
    let filename = 'tags.xlsx';
    filename = decodeURI(filename);
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', filename);
    document.body.appendChild(link);
    link.click();
    window.URL.revokeObjectURL(url);
    link.remove();
}

My first guess would be: Just request that API URL directly and not with an asynchronous request. You should be able to do something like this in your code

$window.location = "http://example/api/download"

For a solution using RESTangular I found this snipped, maybe you can try it:

Restangular.one('attachments', idAtt).withHttpConfig({responseType: 'blob'}}.get({}, {"X-Auth-Token": 'token'}).then(function(response) {
    var url = (window.URL || window.webkitURL).createObjectURL(response);
    window.open(url);
});

It's difficult to answer without seeing your code calling the API, but in general the way you do this is to send a form rather than using ajax. Typically you'd have a hidden iframe with a name="downloadframe" or similar, and then use a form like this:

<form id="downloadform" target="downloadframe" method="POST" action="/the/api/endpoint">
<input type="hidden" name="apiParameter" value="parameter-value">
</form>

Then you'd fill in the fields of the form and submit it programmatically. Here's an example not using Angular, but adapting it would be simple (though not necessary):

var form = document.getElementById("downloadform");
form.apiParameter.value = "appropriate value";
form.submit();

When the browser gets the response, it sees the Content-Disposition header and asks the user where to save the file.

You can even build the form dynamically rather than using markup if you prefer.

本文标签： angularjsDownload file from API using javascriptStack Overflow