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();
Related
In my app I'm using the below code to export the tblData info into Excel, and it works correctly as long as the content is in English.
function exportTableToExcel(tableID, filename = ''){
var downloadLink;
var dataType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'; // or `application/vnd.ms-excel`
var input = document.getElementById(tableID);
var tableSelect = document.createElement("table");
tableSelect = input.cloneNode(true)
const thead = document.createElement("thead");
thead.innerHTML =`
<tr><th>Name</th><th>Skills</th></tr>
`
tableSelect.prepend(thead)
var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
// Specify file name
filename = filename?filename+'.xlsx':'excel_data.xlsx';
// Create download link element
downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
if(navigator.msSaveOrOpenBlob){
var blob = new Blob(['\ufeff', tableHTML], {
type: dataType
});
navigator.msSaveOrOpenBlob( blob, filename);
}else{
// Create a link to the file
downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
// Setting the file name
downloadLink.download = filename;
//triggering the function
downloadLink.click();
}
}
The output is:
How can I fix it so the non-Latin words (Arabic in case) appear correctly?
Add <meta charset='utf-8'> to the source HTML code.
It's even not necessary to add "html", "head", etc.
This worked for cyrillic; hope your case suits, too.
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);
}
When I try to download HTML table ( it contains 2600 rows ) as an excel file, the browser going to crash.However when it contains less records(rows) it's working fine.
For Downloading table I created a link and clicking it virtually. Here is the code.
var base64data = "base64," + $.base64.encode(excelFile);
var result = 'data:' + 'application/vnd.ms-' + defaults.type + ';charset=UTF-8;filename=exportData.doc;' + base64data;
var link = document.createElement('a');
link.download = defaults.fileName + '.xls';
link.href = result;
link.click();
Is there any other way to download with out crashing the browser?
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.
I'm trying to create and download a file on client side with the following code:
function downloadFile(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.click();
}
Although this only works on chrome. Nothing happens on safari and IE. How can I make it work?
Not sure if youve figured this out or not but for this to work in safari you need to create an event and dispatch on the created element like this:
var downloadLink = document.createElement('a');
downloadLink.setAttribute('href', 'data:application/octet;charset=utf-8,' + encodeURIComponent(data));
downloadLink.setAttribute('download', fileName);
downloadLink.style.display = "none";
downloadLink.onclick = function (event) {
document.body.removeChild(event.target);
};
var clk = document.createEvent("MouseEvent");
clk.initEvent("click", true, true);
downloadLink.dispatchEvent(clk);
document.body.appendChild(downloadLink);
downloadLink.dispatchEvent(clk);`
I used this to save my file in CSV/excel format and works in chrome/IE/Safari
refer and make changes needed
var fileName = name + "["+ name1 +"]";
var uri = 'data:text/csv;charset=utf-8,' + escape(finalResult);
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = fileName + ".csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
location.reload();