CODEWITHSUNDEEP
angularjs
user1511956
user1511956

Reputation: 844

Save a file in angular from a http response

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

Upvotes: 4

Views: 19110

Answers (3)

user7432118
user7432118

Reputation:

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

Upvotes: 4

rupampatel
rupampatel

Reputation: 300

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

Upvotes: 4

Lee Willis
Lee Willis

Reputation: 1582

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

Upvotes: 1

Related Questions