Within my server-side application, constructed using the Spring Boot framework, I have implemented a method that returns a stream resembling the following:
public ResponseEntity<StreamingResponseBody> downloadFiles(@RequestBody DownloadRequest payload) {
// Defining proper header
String contentDisposition = "attachment;filename=download.zip";
// Constructing the response stream
StreamingResponseBody stream = outputStream -> {
archiveManagerService.downloadFiles(payload.getArchiveId(), payload.getFiles(), outputStream);
};
return ResponseEntity.ok()
.contentType(MediaType.parseMediaType("application/zip"))
.header(HttpHeaders.CONTENT_DISPOSITION, contentDisposition)
.body(stream);
}
This setup functions correctly as intended, enabling file downloads through Postman. Now, the next step involves invoking this endpoint from the client-side leveraging Axios. Upon research, a library named StreamSaver.js came to light. The library seamlessly integrates with fetch (check source for example code). Yet, integrating it with Axios proves slightly challenging.
The current implementation within my Vuejs-driven code appears as follows:
import axios from 'axios';
import streamSaver from 'streamsaver';
const instance = axios.create({
baseURL: '<my_base_url>',
headers: {
'Content-Type': 'application/json'
}
});
instance.post('/download', postData, {
responseType: 'stream'
})
.then(response => {
// How should I proceed here? The code snippet below seems ineffective
const fileStream = streamSaver.createWriteStream('download.zip');
response.data.pipe(fileStream);
});
A runtime error prompts stating
response.data.pipe is not a function
Seeking guidance on how to effectively consume the stream via Axios on the client-side or exploring any alternate solutions are greatly appreciated.