The issue was with the axios instance.
I have added response type to the request header, the issue was solved.
responseType: "blob",
this was the root cause. After that I was able to download the file with response provided by 'Klian' in the comments to my question.
Answer from Nabeel Mhd on Stack OverflowI'm working with an API res that contains a zip, csv, and pdf. I've been researching how I should download and/or create download buttons for these files but a lot of articles I'm looking through specify that their method is 'hacky' (or something similar).
I don't like the idea of pushing a 'hacky' solution to production. It may be a starting point but not really a good foundation to build off of. Does anybody know of good practices for this kind of procedure?
I've boiled it down to:
-
Parse the response
-
Store the file contents
-
Create sources for the downloads
but surely it isn't that simple, right?
Videos
The issue was with the axios instance.
I have added response type to the request header, the issue was solved.
responseType: "blob",
this was the root cause. After that I was able to download the file with response provided by 'Klian' in the comments to my question.
You can try using the FileSaver.js library to download the file.
Here is the sample code:
import FileSaver from 'file-saver';
// Call your API to get the response
axios.get('/PrintWorkSheet', { responseType: 'arraybuffer' }).then((response) =>
{
//Create a Blob object from the response data
const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
// Use FileSaver.js to save the Blob as a file
FileSaver.saveAs(blob, 'WorkSheet.xlsx');
})
.catch((error) => {
console.log(error);
});