var link = document.createElement("a");
link.id="lnkDwnldLnk";
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
var csv = CSV;
blob = new Blob([csv], { type: 'text/csv' });
var csvUrl = window.webkitURL.createObjectURL(blob);
var filename = "CCUDetail_";
$("#lnkDwnldLnk")
.attr({
'download': filename,
'href': csvUrl
});
$('#lnkDwnldLnk')[0].click();
document.body.removeChild(link);
Here it is showing script error that blob is undefined in ie 11.
Use this for IE,
var IEwindow = window.open();
IEwindow.document.write('sep=,\r\n' + CSV);
IEwindow.document.close();
IEwindow.document.execCommand('SaveAs', true, fileName + ".csv");
IEwindow.close();
For more information i have written tutorial on that,
see - Download JSON data in CSV format Cross Browser Support
Hope this will be helpful for you.
Related
I am working in Alfresco and trying to download the file content as CSV file.
The download works, but only problem is that when I download a content that has dash or em dash inside, when I open that CSV file I see %u2013 and %u2014 instead.
This is my code for that part, I use JavaScript, but I do know how to solve this issue:
var blob = new Blob([CSV], {type: "text/csv;charset=utf-8;"});
if (window.navigator.msSaveOrOpenBlob && window.Blob) {
navigator.msSaveOrOpenBlob(blob, fileName + ".csv");
} else {
var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = fileName + ".csv";
document.body.appendChild(link);
if (navigator.userAgent.search("Chrome") > 0) {
setTimeout(function () {
link.click();
}, 2000);
} else {
link.click();
}
}
document.body.removeChild(link);
For example, value named abolix-fix after the download inside CSV file it is like this abolix%u2013fix.
Thanks in advance!
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);
}
First of all I have to say that questions similar to this have been asked before, but the answers did not help.
Download BLOB content using specified charset
F-8 encoidng issue when exporting csv file , JavaScript
This is the code.
ctrl.downloadFile = function (file) {
var filename = file.filename.split("/"),
name = (filename[filename.length - 1]);
$http({method: 'GET', url: '/download/' + name}, {responseType: "blob"}).then(
function success(response) {
var blob = new Blob([response.data], {type: response.headers['content-type'] + ";text/csv;charset=utf-8,%EF%BB%BF"}),
url = $window.URL || $window.webkitURL,
fileUrl = url.createObjectURL(blob);
var anchor = document.createElement('a');
anchor.href = fileUrl;
anchor.target = '_blank';
anchor.download = name;
anchor.style = "display: none";
document.body.appendChild(anchor);
anchor.click();
setTimeout(function () {
document.body.removeChild(anchor);
}, 100);
}
)
};
This is the html code that calls the downloadFile() function.
<a ng-click="$ctrl.downLoadFile(file)" target='_blank'>{{file.filename}}</a>
The Downloaded file does not support German special characters(Å, Ø, Ü ). What to do that the file supports those characters?
Update 1: I have done this also. But it did not work either.
var blob = new Blob(["\ufeff", response.data],
{type: response.headers['content-type'] +
";text/csv;charset=utf-8"})
Update 2: It works fine if I use these characters(Å, Ø, Ü ) instead of the response.data.
var blob = new Blob(["\ufeff", "Å Ø Ü" ],
{type: response.headers['content-type'] +
";text/csv;charset=utf-8"})
Update 3: This is a single page application. And Yes ,I have used <meta charset="utf-8"> in the head section of the html page.
Using the whole ctrl.downloadFile() was unnecessary. Instead, I used a function to make the download link and then call it in ng-href.
ctrl.urlForFile = function(file) {
var split = file.filename.split("/");
return '/download/' + file['xyz'] + "/" + split[split.length - 1];
};
<a ng-href="{{$ctrl.urlForFile(file)}}" target='_blank'>{{file.filename}}</a>
If you do not need to make the download link dynamically, you should use the link directly in ng-href.
<a ng-href="/download/xyz/dfdsf23423423" target='_blank'>{{file.filename}}</a>
I am trying to download ICS file in all the browsers.
I am able to download ICS file in chrome but not in safari. Here is the javascript code that i used.
if(isChrome)
{
var blob=new Blob([data]);
var link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download=fileName+".ics";
link.click()
}
if(!isChrome)
{
` alert("not chrome");
var downloadLink = document.createElement('a');
downloadLink.setAttribute('href', 'data:application/octet;charset=utf-8,' + escape(data));
var fileName = fileName+'.ics';
downloadLink.setAttribute('download', fileName);
var clk = document.createEvent("MouseEvent");
clk.initEvent("click", true, true);
downloadLink.dispatchEvent(clk);
document.body.appendChild(downloadLink);
downloadLink.dispatchEvent(clk);
//download(data, fileName+".ics", "text/calendar");
}
In Safari browser the generated file is getting downloaded but that file name is not getting appended. The filename i am getting is "Unknown" but the size of the file is 3KB and the content is there only the filename and extension is not getting added to the file.
Please let me know how i can solve this issue.
Thanks in advance
You should specify blob type. { type: 'text/calendar' }
const blob = new Blob([data], { type: 'text/calendar' });
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = filename + ".ics" ;
link.click();
Use this to download the file successfully, but you have to manually add it to the calendar. Safari does not include ics in a list of safe files and it will not be opened automatically.
If the problem is that you're using safari 10.1 or below the problem might be that it doesn't like the download attr.
http://caniuse.com/#feat=download
I wrote this export button that basically spits out all the data I have on the google table into a CSV for download. It works perfectly fine until I have way too many rows and Chrome gives me the "aw snap" error page when I try to download the csv. How do I fix this?
var csvContent = "data:text/csv;charset=utf-8,";
data.forEach(function (infoArray, index) {
dataString = infoArray.join(",");
csvContent += dataString + "\n";
});
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "Data.csv");
link.click();
Chrome can only handle HREF's that are roughly 2 million characters long (or less).
You want to add the output to a Blob and then on that blob create an ObjectURL using URL.createObjectURL (MDN) and attach that to the href attribute of the anchor.
An example might be:
var csvContent = "";
data.forEach(function (infoArray, index) {
dataString = infoArray.join(",");
csvContent += dataString + "\n";
});
var blobdata = new Blob([csvContent],{type : 'text/csv'});
var link = document.createElement("a");
link.setAttribute("href", window.URL.createObjectURL(blobdata));
link.setAttribute("download", "Data.csv");
document.body.appendChild(link);
link.click();