Download files with AngularJS

Question

I need to allow the user to download an array of bytes I get from a REST api.

The backend api return something like this:

GET /api/files/123
{
  filename: 'myfile.pdf',
  file: [base64]
}

On my html I have something like this:

<div ng-click="click()">Download</div>

And somewhere in my controller I have:

$scope.click: function (){
   $http.get('/api/files/123',{headers:{x-security:'some_sec_token'}})
   .then(
     function (response){
       // do something to return the array of bytes
     },
     function (error){
       console.log(error);
     }
   );
}

I'm stuck on how to return the array of bytes with the Content-Disposition header using the filename returned by the api.

Do you want to only download the array of bytes ? or allow the user to create a file with the array of bytes as content ? — Cesar Villasana
– Cesar Villasana, Commented May 21, 2015 at 20:45
to download a file with the name "myfile.pdf" and with the array of bytes as the content of the file — Facundo Ch.
– Facundo Ch., Commented May 21, 2015 at 21:15

Cesar Villasana · Accepted Answer · 2015-05-21 20:54:14Z

2

If you want to create a file using the array of bytes as content then you can use this library:

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

Import that library in you angular project and then try this:

var blob = new Blob(<arrayOfBytes>, {type: <yourFileType>});
saveAs(blob, [nameToSave]);

yourFileType should be something like "image/jpg" or similar depending on your file type

nameTosave should have the file type as well.. example: "myFile.pdf"

Hope it helps.

Cheers

answered May 21, 2015 at 20:54

Cesar Villasana

6873 silver badges6 bronze badges

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

3 Comments

Facundo Ch. Over a year ago

Thank you, but the library failed on line 129 with this error: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

Cesar Villasana Over a year ago

What are u passing as parameter to the blob ?. What browser are you using?. Can you check in console or maybe debugging if the blob creation is ok ?

Facundo Ch. Over a year ago

That's it, the blob was not being created correctly. Now it is solved. Thanks!

Collectives™ on Stack Overflow

Download files with AngularJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related