Styjun

download any file using ResponseEntity with angular does not work

I need to download a file using angular in client side,
this file can have any format it could be a pdf or excel or image or txt ...
my method works just for txt files and gives me a fail format for excel and image and for the pdf it gives an empty pdf.

so in my controller here is the function that calles the service method:

 vm.downloadFile = downloadFile;

 function downloadFile(file)
 var urlDir = "C://STCI//"+idpeticion;
 return VerDocServices.downloadFile(file,urlDir)
 .then(function(response) 
 var data = response.data;
 var filename = file;
 var contentType = 'application/octet-stream';//octet-stream 
 var linkElement = document.createElement('a');
 try 
 var blob = new Blob([ data ], 
 type : contentType
 );
 var url = window.URL.createObjectURL(blob);
 linkElement.setAttribute('href', url);
 linkElement.setAttribute("download", filename);
 var clickEvent = new MouseEvent("click", 
 "view" : window,
 "bubbles" : true,
 "cancelable" : false
 );
 linkElement.dispatchEvent(clickEvent);
 catch (ex) 
 console.log(ex);
 throw ex;
 
 ).catch(function(response) 
 alert('Se ha producido un error al exportar del documento');
 console.log(response.status);
 throw response;
 );
 

and my service.js has:

angular.module('mecenzApp').service('VerDocServices',['$http',function($http) 

this.downloadFile = function(file,urlDir) 

 return $http.get('api/downloadFile', 
 params : 
 file : file,
 urlDir : urlDir
 
 ); ]);

And my service method is this:

@GetMapping("/downloadFile")
@Timed
public ResponseEntity<byte[]> downloadFile(@RequestParam(value = "file") String file, @RequestParam(value = "urlDir") String urlDir) 
 log.debug("GET ---------------- DOWNLOAD FILE : ", file);
 log.debug("GET ---------------- From the DIRECTORY: ",urlDir);

 InputStream fileStream;
 String filepath = urlDir+File.separator+file;
 try 
 File f = new File(filepath);
 log.debug("GET ---------------- FILE: ",f.getPath());
 fileStream = new FileInputStream(f);
 byte[] contents = IOUtils.toByteArray(fileStream);
 HttpHeaders headers = new HttpHeaders();
 headers.setContentType(MediaType.parseMediaType("application/octet-stream")); 
 String filename = file;
 headers.setContentDispositionFormData(filename, filename);
 ResponseEntity<byte[]> response2 = new ResponseEntity<byte[]>(contents, headers, HttpStatus.OK);
 fileStream.close();
 return response2; 

 catch (FileNotFoundException e) 
 System.err.println(e);
 catch (IOException e) 
 System.err.println(e);
 
 return null;

could you plz take a look and tell me what did I have missed??

Thank youuu :)

How to Download Binary Files with AngularJS

When downloading binary files, it is important to set the responseType:

app.service('VerDocServices',['$http',function($http) 

 this.downloadFile = function(url, file, urlDir) 
 var config = 
 //SET responseType
 responseType: 'blob',
 params : 
 file : file,
 urlDir : urlDir
 
 ;

 return $http.get(url, config)
 .then(function(response) 
 return response.data;
 ).catch(function(response) 
 console.log("ERROR: ", response.status);
 throw response;
 ); 
 ; 
]);

If the responseType is omitted the XHR API defaults to converting UTF-8 encoded text to DOMString (UTF-16) which will corrupt PDF, image, and other binary files.

For more information, see MDN Web API Reference - XHR ResponseType

I don't know much about the backend, but I'll provide what i have used may be it will help, so On the Java Script File:

//your $http(request...)

.success(function (data, status, headers, config) 
 //Recieves base64 String data
 var fileName = 'My Awesome File Name'+'.'+'pdf';

 //Parsing base64 String...
 var binaryString = window.atob(data);
 var binaryLen = binaryString.length;
 var fileContent = new Uint8Array(binaryLen);
 for (var i = 0; i < binaryLen; i++) 
 var ascii = binaryString.charCodeAt(i);
 fileContent[i] = ascii;
 
 var blob = new Blob([fileContent], type: 'application/octet-stream' ); //octet-stream
 var fileURL = window.URL.createObjectURL(blob);
 $sce.trustAsResourceUrl(fileURL); //allow angular to trust this url
 //Creating the anchor download link
 var anchor = angular.element('<a/>');
 anchor.css(display: 'none'); // Make sure it's not visible
 angular.element(document.body).append(anchor); // Attach it to the document
 anchor.attr(
 href: fileURL,
 target: '_blank',
 download: fileName
 )[0].click();
 anchor.remove(); // Clean it up afterwards
)
//.error(function(...

And On your backend, make sure that your webservice produces octet-stream and returning the file in base64 data format, i did this using Java JAX-RS like this:

@POST
@Path("/downloadfile")
@Consumes(MediaType.APPLICATION_JSON)
@Produces(MediaType.APPLICATION_OCTET_STREAM)
public Response downloadFile(...)
 String base64String = Base64.getEncoder().encodeToString(/*here you pass your file in byte[] format*/);
 return Response.ok(base64String).build();