I'm building an application using Angular 10. I have a function that downloads files from a local server. This function works fine for extensions - .PDF, .xlsx, etc. , except files with .msg extension. On download, it returns a file of size 0KB.
This is my function:
downloadFile(url:string,fileName:string){
fetch(url)
.then(res => res.blob())
.then(blob => {
var a = document.createElement("a");
document.body.appendChild(a);
a.style.display = "none";
var url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
});
}
I tried to use these headers but still, it didn't work:
application/octet-stream
application/download
How do I resolve this problem?
Use application/vsd.ms-outlook as MIME type for .msg extension.
Related
I got Node JS server which gets XLSX file contents from metabase:
app.get('/channels', async (req, res) => {
// make request to metabase and take response as XLSX
const queryRequestURL = `${api}/public/card/${cardId}/query/xlsx?parameters=${params}`;
const result = got(queryRequestURL);
res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
res.setHeader("Content-Disposition", "attachment; filename=file.xlsx");
return res.send(res);
});
It returns file contents like
So when i make request to server and receive response - it comes as file contents above.
I need to download this data as ordinary excel file on browser side.
What i've tried:
// make request with typical fetch and get result to res variable.
const filename = 'file.xlsx';
const file = new File(res, filename ,{ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
// create link and click it virtually to download created file
var a = document.createElement('a');
a.href = window.URL.createObjectURL(file);
a.download = filename;
a.click();
But I'm getting the error:
Uncaught (in promise) TypeError: Failed to construct 'Blob': The provided value cannot be converted to a sequence.
I think that I'm doing something wrong and there is more simple way to download file.
Without seeing how you're fetching, it's hard to know. But you should be able to use response.blob() to download the result.
fetch("${api}/channels}", {
method: "GET",
})
.then((response) => response.blob())
.then((blob) => {
var url = window.URL.createObjectURL(blob);
var a = document.createElement("a");
a.href = url;
a.download = "file.xlsx";
document.body.appendChild(a);
a.click();
a.remove();
});
As Joey Ciechanowicz mentioned, we should return response.buffer() from backend and work with its data as blob at frontend.
I mean
NodeJS side (using Got):
const result = got(queryRequestURL, {
headers: headers
});
return await result.buffer()
Frontend side (pure JavaScript):
// fetch data
const result = await fetch(api + path);
return result.blob();
// download file
const filename = 'export.xlsx';
var url = window.URL.createObjectURL(result);
var a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
a.remove();
I am able to download the file from specific URL. But here problem is this file getting saved inside the download folder of the system. Is there any way to save this file locally in project and read this file programmatically?
const downloadFile = () => {
fetch(urlToDownload)
.then(response => {
response.blob().then(blob => {
let url = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = url;
a.download = 'example.pdf';
a.click();
});
});
}
In React, I uploaded a file using:
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function() {
let base64data = reader.result;
uploadFile(base64data);
return;
}
This gives me a Base64 encoded text data:application/octet-stream;base64,JVBERi0xLj...
This is fine as when I decode 'JVBERi0xLj...' I get the correct text in case of a text file.
When a download request is made to the server I get the same data back but I'm having a difficulty downloading the file. I receive the same base64 encoded string in the response from the server but unable to open the downloaded file.
I have done the following:
const blob = new Blob([fetchData], { type: 'application/pdf' })
let url = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = blob;
a.download = 'doc.pdf';
a.click();
Any ideas?
Note: The upload file is converted to base64 to avoid any http communication issues.
Solution following your suggestions:
let fetchDataModified = `data:application/pdf;base64,${fetchData }`;
let a = document.createElement("a");
a.href = fetchData;
a.download = 'doc.pdf';
a.click();
When converting to Base64 during upload the data type was set to 'application/octet-stream'. However, when downloading I changed that to 'application/pdf' following Vaibhav's suggestion and used createElement instead of createObjectURL and it worked. Thank you
“data:application/pdf” + the base64 string that you saved into our database
I'm making an ajax POST call to my server, generating an ugly remote download URL, passing that to nginx with proxy_pass and then serving the file to the client. See here for process. The image seems to make it to the client, I just can't get it to download.
As seen in screenshots, the chrome response preview shows the jpeg, the headers look good (content-disposition attachment).
How can I turn this response into a downloadable file for the user?
I've tried https://stackoverflow.com/a/23797348/5697126, however, the file that gets downloaded is corrupted and 150% size of the real image. Here's my attempt, it does download a file, but the file is corrupted with the message - Error interpreting JPEG image file (Not a JPEG file: starts with 0xef 0xbf)
const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
const matches = filenameRegex.exec(_responseHeaders['content-disposition']);
let fileName = '';
if (matches != null && matches[1])
{
fileName = matches[1].replace(/['"]/g, '');
}
let fileType = _responseHeaders['content-type'];
let blob = new Blob([_response], {type: fileType});
let URL = window.URL || window.webkitURL;
let downloadUrl = URL.createObjectURL(blob);
if (fileName)
{
// use HTML5 a[download] attribute to specify filename
let a = document.createElement('a');
// safari doesn't support this yet
if (typeof a.download === 'undefined')
{
window.location = downloadUrl;
}
else
{
a.href = downloadUrl;
a.download = fileName;
document.body.appendChild(a);
a.click();
}
}
else
{
window.location = downloadUrl;
}
setTimeout(function ()
{
URL.revokeObjectURL(downloadUrl);
}, 100); // cleanup
Solved!
I had to set the ajax (axios) response type to 'blob' as the default is json. See - https://github.com/axios/axios/issues/448
Once the response was blob, I just piped the _response to URL.createObjectURL and then rest of the code I posted worked like a charm
I am working on a web app that opens binary files and allows them to be edited.
This process is basically ondrop -> dataTransfer.files[0] -> FileReader -> Uint8Array
Essentially, I want to be able to save the modified file back as a binary file. Ideally as a file download with a specified file name.
There doesn't seem to be any standard method of doing this, and that sucks, because everything up to that point is well supported.
I am currently converting the array to a string using String.fromCharCode(), base64 encoding that, and using a data uri in a hyperlink like data:application/octet-stream;base64,.., along with the download attribute to specify filename.
It seems to work, but it's quite hacky and I think converting the raw bytes to a string might introduce encoding issues depending on the byte values. I don't want the data to become corrupt or break the string.
Barring that, is there a better/proper method for getting an array of bytes as a binary file to the user?
These are utilities that I use to download files cross-browser. The nifty thing about this is that you can actually set the download property of a link to the name you want your filename to be.
FYI the mimeType for binary is application/octet-stream
var downloadBlob, downloadURL;
downloadBlob = function(data, fileName, mimeType) {
var blob, url;
blob = new Blob([data], {
type: mimeType
});
url = window.URL.createObjectURL(blob);
downloadURL(url, fileName);
setTimeout(function() {
return window.URL.revokeObjectURL(url);
}, 1000);
};
downloadURL = function(data, fileName) {
var a;
a = document.createElement('a');
a.href = data;
a.download = fileName;
document.body.appendChild(a);
a.style = 'display: none';
a.click();
a.remove();
};
Usage:
downloadBlob(myBinaryBlob, 'some-file.bin', 'application/octet-stream');
(shorter) ES6 version of the top answer:
const downloadURL = (data, fileName) => {
const a = document.createElement('a')
a.href = data
a.download = fileName
document.body.appendChild(a)
a.style.display = 'none'
a.click()
a.remove()
}
const downloadBlob = (data, fileName, mimeType) => {
const blob = new Blob([data], {
type: mimeType
})
const url = window.URL.createObjectURL(blob)
downloadURL(url, fileName)
setTimeout(() => window.URL.revokeObjectURL(url), 1000)
}