I am trying to download a file using ReactJS. I have the link of the file and I can actually open the file through my browser. After several attempts. Here, is my function to download the file.
saveFile(filename) {
let blob = new Blob();
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob, filename);
} else {
const a = document.createElement('a');
document.body.appendChild(a);
const url = window.URL.createObjectURL(blob);
a.href = url;
a.download = filename;
a.click();
setTimeout(() => {
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
}, 0)
}
}
Unfortunately, I get the pop-up as expected but I get a 0 MB file downloaded.
Any ideas on how to do around this? Note that the file is mp3
Related
I have a question about react. I need to download a file from the uploads/doc folder.
I've written my code, but it downloads an empty file. Could you give me a hint on how to fix this issue? Thank you so much!
if (result.isConfirmed) {
//console.log("error while downloading document: ");
await getDocfile(_id);
fetch('http://localhost:4200/uploads/docs')
.then(response => {
response.blob().then(blob => {
let url = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = url;
a.download = document_name + '.pdf';
a.click();
});
});
}
I'm serving pdf file with nodejs/koa2
ctx.body = readableStream;
ctx.attachment('file.pdf');
The file successfully arrives and on the client side i receive it with ReactJS application:
const document = useSelector(selectors.getFile(documentFile.key));
if (document) {
window.open(window.URL.createObjectURL(new Blob([document], { type: "application/octet-stream" })), "_self");
}
...
const openFile = useCallback((key) => {
dispatch(actions.getFile.request(key))
}, [dispatch]);
It successfully downloads the file, but completely ignores response header Content-Disposition: attachment; filename="file.pdf" and downloads it under the name like d3aa7870-bd35-4645-a926-294392343cfc which is taken from the BLOB url: Request URL: blob:http://localhost:3000/d3aa7870-bd35-4645-a926-294392343cfc.
Could you please advise how to correctly save it under the name of file.pdf on the client side?
just create an element and set download attribute with file name
const document = useSelector(selectors.getFile(documentFile.key));
if (document) {
const url =window.URL.createObjectURL(new Blob([document], { type: "application/octet-stream" }))
const a = document.createElement("a");
a.style = "display: none";
document.body.appendChild(a);
a.href = url;
a.download = "fileName";
a.click();
window.URL.revokeObjectURL(url);
}
I am getting a response from a rest api whose Content-Type is text/html and Content-Encoding is gzip.
I tried to download it using blob
const blob = new Blob([res], { type: 'application/gzip' });
const downloadUrl = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = downloadUrl;
document.body.appendChild(a);
a.click();
But the downloaded gz file was not able to open (seems to be corrupted).
can some one help me with downloading zip file in reactjs.
Edit: require a solution without using any external plugins
you can use jszip npm module.
For example:
var zip = new JSZip();
zip.file("Hello.txt", "Hello World\n");
var img = zip.folder("images"); //images is the folder which will be zip
img.file("smile.gif", imgData, {base64: true});
zip.generateAsync({type:"blob"}).then(function(content) {
saveAs(content, "example.zip");
});
To use it without jszip, you can try the following code:
function str2bytes (str) {
var bytes = new Uint8Array(str.length);
for (var i=0; i<str.length; i++) {
bytes[i] = str.charCodeAt(i);
}
return bytes;
}
and its usage:
var blob = new Blob([str2bytes(myData)], {type: "application/zip"});
saveAs(blob, "data.zip");
But jszip is a better alternative approach.
I am getting an html file from a backend application and now saving it in pdf format in react. However, unable to open it in adobe :(
CreateFile(data, contentType) {
let file;
if (contentType === "text/html") {
// file = new Blob([data], { type: contentType });
file = new Blob([new Uint8Array(data)], { type: contentType });
}
saveDocument() {
let contentType = "application/pdf";
let file = this.createFile(data,
contentType.toLowerCase());
if (window.navigator.msSaveOrOpenBlob) // IE10+
window.navigator.msSaveOrOpenBlob(file, filename);
else { // others apart from Safari and Opera mini
var a = document.createElement("a"),
url = window.URL.createObjectURL(file);
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
can anyone help?
I suggest you using a library like wkhtmltopdf in your backend to convert the html into pdf before sending it.
I am using AngularJS and in POST request download file .xls
this.$http.post('/api/rept/detc/xls', params).then((response) => {
let blob = new Blob([response], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
}),
objectUrl = URL.createObjectURL(blob);
window.open(objectUrl);
})
But then download file without format with name (in this format: c65c45f8-e6a3-458d-xxxx-43c5fcxxxxx).
How can I download without FileSave package?
Similar approach that worked for me:
this.$http.post('/api/rept/detc/xls', params).then((response) => {
let blob = new Blob([response]);
let url = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = url;
a.download = 'filename_here';
a.target = '_blank';
a.click();
})