I have used the below code to download a csv file
let url = "https://test.com/test/auth/files/download/86ccc28c-383f-4c84-ac0d-61478da2f62c/e60f7709-288a-424c-bb13-9ff4bb60bec1?platform=HTMLCLIENT&source=855ca910c9d347b69403cf1791bab97c&linktoken=be50f537833bf693d9e0a3ecb8432159db966ee6"
window.open(url);
Above code is working in all browsers except safari browser.
I have done the below work around,
let a = document.createElement('a');
a.target = '_self';
a.href = url;
a.download = 'test.csv';
document.body.appendChild(a);
a.click();
which is opening a file in new tab instead of downloading in safari. could any one help with this problem?
Reference: https://bugs.webkit.org/show_bug.cgi?id=167341
https://github.com/dotnetCarpenter/FileReader_Chrome
fetches as blob and converts to a datauri. Not suitable for large files, as the entire base64 encoded file has to be stored in memory.
fetch(url, {
method: 'get',
})
.then(response => response.blob())
.then(blob => {
const fileName = 'filename.csv'
if (navigator.msSaveBlob) { // IE11 and Edge 17-
navigator.msSaveBlob(blob, fileName)
} else { // every other browser
const reader = new FileReader()
reader.onloadend = () => {
const a = document.createElement("a")
a.href = reader.result
a.style.display = 'none'
a.download = fileName
document.body.appendChild(a)
a.click()
a.parentNode.removeChild(a)
}
reader.readAsDataURL(blob)
}
})
Can you post any of your html? I've had success forcing downloads of files by using the download attribute within an anchor tag.
<a href="http://www.this.link.com/csv_1.csv" download...
Related
I am trying to create an excel file that is downloadable from both Firefox and Chrome from an Angular 2+ environment. I have it working perfectly in firefox, but everything i try just doesn't work in Chrome - it downloads the file but when you open it throws an error - "Excel cannot open this file because the file format or file extension is not valid..".
I've tried to set my post responseType as 'arrayBuffer' and then creating a blob then downloading that, with no success. I've tried responseType as:
1)'blob'
2)'blob' as 'json'
3)'blob' as 'blob'
and passing it through to my component that way. Nothing seems to work on Chrome, everything works on Firefox though.
Here are some of my functions i have used to try get Chrome to open this excel.
downloadBlob(data: Blob, fileName: string) {
//output file name
//detect whether the browser is IE/Edge or another browser
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
//To IE or Edge browser, using msSaveorOpenBlob method to download file.
window.navigator.msSaveOrOpenBlob(data, fileName);
} else {
//To another browser, create a tag to downlad file.
const url = window.URL.createObjectURL(data);
const a = document.createElement('a');
document.body.appendChild(a);
a.setAttribute('style', 'display: none');
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
a.remove();
}
}
blobToFile(data: Blob, fileName: string) {
const a = document.createElement('a');
document.body.appendChild(a);
a.style.display = 'none';
const url = window.URL.createObjectURL(data);
a.href = url; a.download = fileName; a.click();
window.URL.revokeObjectURL(url);
}
downloadArray(data, fileName: string) {
var blob = new window.Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
window.URL = window.URL || window.webkitURL;
var url = window.URL.createObjectURL(blob);
window.location.href = url;
}
I've even tried to use the FileSaver.js plugin to save my blob with the oneliner
saveAs('blob', 'filename');
but everything wont read when opening from chrome. Any suggestions would be much appreciated.
Consider removing revokeObjectURL(). This test works and downloads in Chrome: https://batman.dev/static/70844902/
function downloadBuffer(arrayBuffer, fileName) {
const a = document.createElement('a')
a.href = URL.createObjectURL(new Blob(
[ arrayBuffer ],
{ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }
))
a.download = fileName
a.click()
}
What I actually want is to make something like Mega web, where when you download a file, first it downloads it inside your browser, then your browser prompts to actually download the file and the file will be downloaded instantly.
So far this is what I've found as a solution:
fetch(url).then(response => response.text())
.then(uri => {
var link = document.createElement("a");
link.download = name;
link.href = uri;
link.click();
})
while it works for small pictures, I've tried this approach on a 80mb file, and the tab crashed.
I haven't tested this yet but apparently this is working:
fetch(url)
.then((response) => response.blob())
.then((blob) => {
var URL = window.URL || window.webkitURL;
var fileURL = URL.createObjectURL(blob);
var link = document.createElement("a");
link.download = name;
link.href = fileURL;
link.click();
URL.revokeObjectURL(fileURL);
});
I have already found a solution for csv files using blob but it doesn't seem to work with other files, I want to download the file regardless of the type. I will get the the url for the file on the page load,but using blob to preferred the click function is not working.
CopyUrl(urls) {
const a = document.createElement("a");
document.body.appendChild(a);
const blob: any = new Blob([urls], {
type: "octet/stream"
});
const url = window.URL.createObjectURL(blob);
a.href = url;
const data = "test" + ".mp4";
a.download = data;
a.click();
window.URL.revokeObjectURL(url);
return blob;
}
<a class="dropdown-item"
(click)="CopyUrl(mediaFiles.data[activeFileIndex].mediaFileResponse.sourceUrl)">Copy Url
</a>
Any help would be appreciated.
You can use file-saver. Send response as a byte stream from your backend and on button Click , make the following request
this.http.get(url,{ responseType: 'blob' }).subscribe((respBlob: any) => {
saveAs(respBlob, `file.pdf`)
});
I'm attempting to download a CSV file using the href method, however it appears data is truncated when setting it to a href tag.
For IE I used msSaveBlob and that appears to be working correctly and all data is correctly downloaded.
if (navigator.msSaveBlob) { // IE 10+
navigator.msSaveBlob(new Blob([data], { type: 'text/csv;charset=utf-8;' }), filename);
}
//
var csvContent = "data:text/csv;charset=utf-8," + data;
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
//
link.setAttribute("download", filename);
link.innerHTML = "CSV Link - Placeholder";
document.body.appendChild(link); // Required for FF
link.click();
These are relatively large files, 9k lines in excel (around 500kb).
Any ideas what I can do to stop this truncation? Should I use a different method? Thanks!
Solved using below answer:
download file using an ajax request
Essentially:
var file = new Blob([data], {type: 'text/csv;charset=utf-8;'});
if (window.navigator.msSaveOrOpenBlob) // IE10+
window.navigator.msSaveOrOpenBlob(file, filename);
else { // Others
var a = document.createElement("a"),
url = URL.createObjectURL(file);
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
setTimeout(function() {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 0);
}
i'm trying to download a csv file, however it seem to work in all browsers except safari? how come is that. in safari it is just showing it in the browser?
Here is my code:
var saveData = (function () {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
return function (data, fileName) {
var blob = new Blob([data], {type: "text/csv;charset=utf-8"}),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
setTimeout(function(){
window.URL.revokeObjectURL(url);
}, 100);
};
}());
Your using the HTML 5 download attribute on the anchor tag which Safari doesn't support.
http://caniuse.com/#feat=download
It's probably best to link to the file and set headers like so to tell the agent to download rather than display.
Content-Type: text/csv
Content-Disposition: attachment; filename="whatever.csv"