Here's how you can download a file from server using AngularJS.
In this example, the client sends a API call to Java server to download a file /api/download/{id} and server sends the base64 data stream download for a given file id.
Below is the snippet from working code. The code is pretty descriptive.
This will allow you to download any type of file.
AngularJS controller method:
function downloadReportFile(fileId) {
Download.downloadQueuedReport({id: fileId}, function (response) {
var anchor = angular.element('<a/>');
anchor.attr({
href: 'data:application/octet-stream;base64,' + response.data,
target: '_self',
download: response.headers.filename });
angular.element(document.body).append(anchor);
anchor[0].click();
});
}
AngularJS service to do the API call:
'downloadQueuedReport': {
method: 'GET',
url: 'api/download/:id',
params: {id: '@id'},
transformResponse: function (data, headers) {
var response = {};
response.data = data;
// take note of headers() call response.headers = headers();
return response;
}
},
Spring Powered Backend REST API
@RequestMapping(value = "api/download/{id}",
method = RequestMethod.GET,
produces = MediaType.APPLICATION_OCTET_STREAM_VALUE)
public ResponseEntity<byte[]> downloadReportFile(@PathVariable Long id) {
log.debug("REST request to download report file");
File file = getReportFile(id); // a method that returns file for given ID
if (!file.exists()) { // handle FNF
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
}
try {
FileSystemResource fileResource = new FileSystemResource(file);
byte[] base64Bytes = Base64.encodeBase64(IOUtils.toByteArray(fileResource.getInputStream()));
HttpHeaders headers = new HttpHeaders();
headers.add("filename", fileResource.getFilename());
return ResponseEntity.ok().headers(headers).body(base64Bytes);
} catch (IOException e) {
log.error("Failed to download file ", e);
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
}
}
