Getting Angularjs $http post response as file result

Question

I have a very long content request parameters form my web api. So I need send a POST request . And my api is creating a PDF file as response. But I can not get the result with angularjs $http provider.

var req = {
  method: 'POST',
  url: 'http://myapi.com/api/renderfile',
  data: { 
       p1: 'very long text....' ,
       p2: 'another very long text....',
       p3: 'another very long text....' 
  }
}

$scope.isLoading = true;

$http(req).then(function(response){

       // response is file result how can I save it ???

       $scope.isLoading = false;
   }, function(){
       $scope.isLoading = false;
   });

I can not save the file response on client?

response is like this:

When I use FileReader

 new FileReader().readAsDataURL(new Blob([response.data], {type:'application/pdf'}));

The popup appears on browser:

But file is empty.

Do you really need to go through AJAX for this? I think a common approach is to return a link to a remote repo where the user can download the file and let the browser handle downloading. — birkett
– birkett, Commented Feb 28, 2017 at 13:22
What do you mean "can not get the results"? What is in the response object?What error message are you getting? — georgeawg
– georgeawg, Commented Feb 28, 2017 at 13:40

VadimB · Accepted Answer · 2017-02-28 14:09:21Z

5

You can force browser to download this file if you have file content in your response.

var reader = new FileReader();

$http(req).then(function(response){
   reader.readAsDataURL(new Blob([response.data], {type:'application/pdf'}));
});

reader.onload = function(e) { 
    window.open(decodeURIComponent(reader.result), '_self', '', false); 
}

But preferred solution is to include location header in your response with the link to file. So you can force browser to download just by navigating to this link.

Proposed solution works only in HTML5 browsers.

edited Feb 28, 2017 at 14:09

answered Feb 28, 2017 at 13:25

VadimB

5,7213 gold badges39 silver badges49 bronze badges

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

9 Comments

Atul Sharma Over a year ago

Cool ! never thought this way .. i used to create forms when file download is required. :P

VadimB Over a year ago

@atulquest93 Interesting. How you download with forms? I mean when you have AJAX response with file content? Could you point to some resource or source code?

VadimB Over a year ago

@bookmarker, just refer to response.data when use FileReader. I've updated code.

barteloma Over a year ago

I updated, but error is: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

VadimB Over a year ago

Seems your data is not in correct type. Need to be convered into Blob => new Blob([response.data], {type:'application/pdf'}). I've updated example

|

georgeawg · Accepted Answer · 2017-02-28 13:57:16Z

Downloading Binary Files with AngularJS

When downloading binary files it is important to set the responseType attribute of the XHR.

var config = { responseType: 'blob' }

var httpPromise = $http.get(url, config);

httpPromise.then(function (response) {
    $scope.data = response.data;
});

For more information, see MDN XHR API - ResponseType.

Creating a `Download` Button

This is an example of a Download button that becomes active after the data is loaded from the server:

<a download="data_{{files[0].name}}" xd-href="data">
  <button ng-disabled="!data">Download</button>
</a>

The xdHref Directive

app.module("myApp").directive("xdHref", function() {
  return function linkFn (scope, elem, attrs) {
     scope.$watch(attrs.xdHref, function(newVal) {
       if (newVal) {
         elem.attr("href", newVal);
       }
     });
  };
});

The DEMO on PLNKR.

Collectives™ on Stack Overflow

Getting Angularjs $http post response as file result

2 Answers 2

9 Comments

Downloading Binary Files with AngularJS

Creating a `Download` Button

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Downloading Binary Files with AngularJS

Creating a Download Button

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Creating a `Download` Button