Upon receiving a binary response from the backend containing the filename and its corresponding download type, the following code snippet illustrates the data:
01 00 00 00 78 02 00 00 6c 02 00 00 91 16 a2 3d ....x...l....... 9d e3 a6 4d 8a 4b b4 38 77 bc b1 b7 01 00 00 00 ...M.K.8w....... 00 00 00 00 00 00 00 00 00 00 00 00 dc 07 07 00 ................ 05 00 06 00 0c 00 30 00 2f 00 58 01 0f e5 52 9a ......0...X...R. 01 00 00 00 78 02 00 00 6c 02 00 00 91 16 a2 3d ....x...l....... 9d e3 a6 4d 8a 4b b4 38 77 bc b1 b7 01 00 00 00 ...M.K.8w....... 00 00 00 00 00 00 00 00 00 00 00 00 dc 07 07 00 ................ 05 00 06 00 0c 00 30 00 2f 00 58 01 0f e5 52 9a ......0...X...R.
The resulting output is: "@@", which needs to be saved based on the type (xlsx, csv, txt) provided by the backend and downloaded locally.
In the service file:
public downloadFile() {
const url = 'http://localhost:3300/star';
return this.http.get(url, {
headers: new HttpHeaders({
'Authorization': 'Basic ' + "token",
'Content-Type': 'application/octet-stream',
}), responseType: 'blob'
}).pipe(
tap(
data => console.log('You received data'),
error => console.log(error)
)
);
} In the component file:
this.service.downloadFile().subscribe((res) => {
//res value is : Blob {size: 519, type: "text/html"}
// Using file-saver to save the file
saveAs(res, `demo.xlsx`);
}, error => {
console.log(error);
});
Dealing with potentially large file sizes being sent from the backend, such as a 100 MB xlsx file in binary format, raises concerns on how to handle downloads efficiently on the client side. Any advice or guidance on this matter would be greatly appreciated. Thank you.