Angular - Save incoming file in response to $resource request

Question

I have an angular service. I am sending a request using $resource to my API. The API is sending a file which is supposed to be downloaded. How do I save it?

NOTE: My API is already sending headers which make the browser download the file.

If I access the API directly from browser, the file downloads. BUT, If I access the API from $resource, nothing happens.

API:

res.writeHead(200, {
    'Content-Type': 'application/octet-stream',
    "content-disposition": "attachment;"
});
res.end(fileText);

What request type is it? If it's GET, try to use download attribute to a link. — dfsq
– dfsq, Commented Apr 13, 2016 at 7:28

topless · Accepted Answer · 2016-04-13 07:29:26Z

1

Try providing a filename, if its a json type otherwise alter content-type accordingly.

"Content-Type": 'application/json'
"content-disposition": "attachment;filename=fname.json"

edited Apr 13, 2016 at 7:29

answered Apr 13, 2016 at 7:27

topless

8,23111 gold badges60 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dushyant Bangal Over a year ago

No, still nothing. It works if accessed directly from browser without giving filename

topless Over a year ago

Can you give a try to this or even better the more elegant and simple answer like this?

Dushyant Bangal Over a year ago

I am trying a Blob solution, but that doesn't seem a proper way to go. Will give this a try too

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

UPDATE:

I've found a total working solution for this, and unlike the old answer, it works on FF and IE:

var blob = new Blob([response], {type: 'text/json'});

// FOR IE:
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(blob);
}

// For Other browsers (tested on Chrome, FF)
else{
    var e = document.createEvent('MouseEvents'),
        a = document.createElement('a');

    a.download = filename;
    a.href = window.URL.createObjectURL(blob);
    a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
    e.initEvent('click', true, false, window,
      0, 0, 0, 0, 0, false, false, false, false, 0, null);
    a.dispatchEvent(e);
}

Old answer:

Thanks to topless for guiding me to a proper answer. Here's how I got it working:

myService.exportData().$promise.then(function (response) {
    var anchor = angular.element('<a/>');
    anchor.attr({
        href: 'data:attachment/json,' + encodeURI(JSON.stringify(response)),
        target: '_blank',
        download: 'exported logs.log'
    })[0].click();

})

Also, Now I dont need to set the headers at the API side. res.send(myFileText) works just fine!

NOTE: DOES NOT WORK IN IE & SAFARI

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 13, 2016 at 7:55

Dushyant Bangal

6,40310 gold badges53 silver badges86 bronze badges

1 Comment

dfsq Over a year ago

The only problem is that it will not work in IE and Safari.

Collectives™ on Stack Overflow

Angular - Save incoming file in response to $resource request

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related