Save a file in angular from a http response

Question

I was wondering how I can save a file that is contained in a response from the server in angular ? (So that the file is automatically downloaded when the response arrives)

Edit :

I have a $http post method, and I get pdf data in the response. On success, I want to save the response data as a pdf file.

E. g :

$http({
       method: 'POST',
       url : 'theUrl',
       data: //some array that is received
       headers : //content type info
}
.success(function(response) { // I want to save the response as a pdf });

Can you be specific? What type of file is contained in response, any example? — Rahil Wazir
– Rahil Wazir, Commented Nov 6, 2014 at 11:30

rupampatel · Accepted Answer · 2016-03-21 19:57:58Z

Using HTML5 FileSaver interface, this can be achieved:

https://github.com/eligrey/FileSaver.js/

Example solution:

     //Call API to retrieve file stream using POST request 
              $http.post("URL", searchData, { responseType: 'arraybuffer' }).then(
                            response => {
                                //Download file from response
                                saveFileAs(response);
                            },
                            data => {
                                //raise error
                            }
                        );
             function saveFileAs(response) {
                        var contentDisposition = response.headers("content-disposition");
                        //Retrieve file name from content-disposition 
                        var fileName = contentDisposition.substr(contentDisposition.indexOf("filename=") + 9);
                        fileName = fileName.replace(/\"/g, "");
                        var contentType = response.headers("content-type");
                        var blob = new Blob([response.data], { type: contentType });
                        saveAs(blob, fileName);
                    }

user7432118 · Accepted Answer · 2017-01-20 13:50:31Z

4

On angular 2... you can do:

 import { saveAs } from 'browser-filesaver/FileSaver.js'

 downloadFile(data: Response) {
    var blob = new Blob([data], {type: 'application/x-tar'});
    saveAs(blob, "report.tgz");
 }

answered Jan 20, 2017 at 13:50

user7432118

Comments

Lee Willis · Accepted Answer · 2014-11-06 11:58:49Z

1

You can't save the document as you don't have access to the users file system in a browser. You could send the URL of the pdf back, then trigger the browsers build in file save / open mechanism by adding a dummy iFrame to the body:

$http({
   method: 'POST',
   url : 'theUrl',
   data: //some array that is received
   headers : //content type info
}
.success(function (data) {
    if ($('#iframe').length == 0) {
        var $iframe = $('<iframe id="iframe" style="display: none"></iframe>');
        $('body').append($iframe);
    }
    $('#iframe').attr('src', {{url to retrieve the file}})
})

answered Nov 6, 2014 at 11:58

Lee Willis

1,5909 silver badges14 bronze badges

3 Comments

user1511956 Over a year ago

Ah, nice! :) I tried to do this, and the url to retrieve the file was url/test.pdf. Then, I get this "Refused to display, X-Frame options set to deny". I don't know, seems to be working, except this x-frame thing.

user1511956 Over a year ago

Lee Willis : Do you have any suggestions for how I can avoid this X-Frame problem ? Are there any other / better way of downloading this file ? The request is sent when I push a button. Can I use html in some way ? (Yes, I'm a web-noob ;))

Lee Willis Over a year ago

try injecting the $sce service into your controller, then use: $sce.trustAsResourceUrl(fullUrl)

Collectives™ on Stack Overflow

Save a file in angular from a http response

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related