AngularJS Download File From Server - Best way with Java Spring Backend
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.
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); } }
Subscribe to:
Comments
(
Atom
)