How to download table rows in CSV format in Internet Explorer from client side? At present I am using the below URI method to download it in other browser. But it seems Internet Explorer does not support the below mechanism. I want to support from IE version 8 till the latest. Any help for IE would be appreciated.
var fileName = "Result";
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);
link.click();
document.body.removeChild(link);
I got the solution for it which is supporting IE 8+ for me. We need to specify the separator as shown below.
if (navigator.appName == "Microsoft Internet Explorer") {
var oWin = window.open();
oWin.document.write('sep=,\r\n' + CSV);
oWin.document.close();
oWin.document.execCommand('SaveAs', true, fileName + ".csv");
oWin.close();
}
You can go through the link http://andrew-b.com/view/article/44
Related
Unicode Encoding... Gettting UTF-8
I am using this code...
var content = 'demo';
uriContent = "data:application/text," + encodeURIComponent(content);
var link = document.createElement('a');
link.setAttribute('href', uriContent);
link.setAttribute('download', '22ddd' + '.txt');
link.click();
The content in the text file will be in Hindi Language which will be further converted into APS fonts. The font converter software available with the client works when the encoding is Unicode. I am able to download the text file properly but it is in UTF-8 encoding
The documentation says,encodeURIComponent generates only UTF-8. So we must try something different.
I tried to put some pieces together:
a modern browser (Chrome 56) and
a text-econding polyfill
and it works (for me):
<html>
<body>
<script>window.TextEncoder = window.TextDecoder = null;</script>
<script src="encoding-indexes.js"></script>
<script src="encoding.js"></script>
<script>
demo = function() {
var content = 'demo';
var uint8array = new TextEncoder( 'utf-16', { NONSTANDARD_allowLegacyEncoding: true }).encode(content);
var blob = new Blob([uint8array], {type : "octet/stream" });
var url = URL.createObjectURL(blob);
var link = document.createElement('a');
link.setAttribute('href', url);
link.setAttribute('download', '22ddd' + '.txt');
link.click();
};
</script>
<button onClick="demo();">
Test
</button>
</body>
</html>
I have this ExtJS code which is for converting a grid data into Excel format and write to a file, the code will ultimately export the grid data into downloadable Excel file. This works great in firefox and chrome but fails to function in IE browser (IE 11).
on analyzing found that the code will ultimately post below string onto URL box which will download the excel file.
data:application/vnd.ms-excel;base64,<base64 encoded string follows here>
at first, I thought problem might be somewhere in the code, then i happen to check below steps.
if i paste below content either in chrome or firefox, it prompts for file download and downloads a dummy file.
data:application/vnd.ms-excel;base64,blahblahblahblahblah
however if i paste the above same string in IE 11, it does nothing. So i am on the assumption that code is working fine but i may have to do something more to make it compatible for IE browser. But i dont know what else i could try.
any pointer is deeply appreciated.
below is my ExtJS code, if it helps.
//here xmlString has the constructed xml string which holds
//grid column headers + grid rows with Table, Column, Cell and Worksheet tags.
var ctx = {
created : (new Date()).getTime(),
worksheets : xmlString
};
var uri = 'data:application/vnd.ms-excel;base64,',
tmplWorkbookXML = '<?xml version="1.0"?><?mso-application progid="Excel.Sheet"?><Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">' + '<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office"><Author>BlahBlah</Author><Created>{created}</Created></DocumentProperties>' + '<Styles>' + '<Style ss:ID="columnHeader"><Font ss:Size="11" ss:Bold="1" /><Interior ss:Color="#CCFFCC" ss:Pattern="Solid"/> </Style>' + '</Styles>' + '{worksheets}</Workbook>',
base64 = function(s) {
return window.btoa(unescape(encodeURIComponent(s)));
},
format = function(s, c) {
return s.replace(/{(\w+)}/g, function(m, p) {
return c[p];
});
};
var workbookXML = format(tmplWorkbookXML, ctx);
var link = document.createElement("A");
link.href = uri + base64(workbookXML);
link.download = sheetName + " Level Report - " + Ext.Date.format(new Date(), 'Y-m-d H:i:s') + '.xls';
link.target = '_blank';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
PS: I have tried this on both ExtJS V4.1 and V6.0 but same behaviour.
Is there anyway to download a csv string that I have created in my javascript in Safari?
EDIT: I do not want to (cannot) create a file on the server.
I have the following code, it will work fine on other browsers, but not on safari. The best that I can seem to make it do is open the data in a new window, but that is an awful UI experience for the user.
$("#csv").click(function(event) {
event.preventDefault();
navigator.sayswho = (function() {
var ua = navigator.userAgent, tem,
M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
return M[1];
})();
var download = function (content, fileName, mimeType) {
var a = document.createElement('a');
mimeType = mimeType || 'application/octet-stream';
mimeType = 'application/octet-stream';
if (navigator.msSaveBlob) { // IE10
return navigator.msSaveBlob(new Blob([content], {
type: mimeType
}), fileName);
} else if ('download' in a) { //html5 A[download]
a.href = 'data:' + mimeType + ',' + encodeURIComponent(content);
a.setAttribute('download', fileName);
document.body.appendChild(a);
setTimeout(function () {
a.click();
document.body.removeChild(a);
}, 66);
return true;
} else { //do iframe dataURL download (old ch+FF):
if (navigator.sayswho == 'Safari') {
var uri = 'data:text/csv;charset=utf-8,' + escape(content);
var link = document.createElement("a");
link.href = uri;
link.target = "_blank";
link.style = "visibility: hidden";
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
else
{
var f = document.createElement('iframe');
document.body.appendChild(f);
f.src = 'data:' + mimeType + ',' + encodeURIComponent(content);
setTimeout(function () {
document.body.removeChild(f);
}, 33333);
return true;
}
}
}
//csv_content is my string that has the csv data in it.
download(csv_content, moment().format("YYYY_MM_DD_HH_mm") + '.csv', 'text/csv');
});
In Chrome and in FireFox, it works as expected. I saw some answers using FileSaver.js (https://stackoverflow.com/a/14858315/1758023), but the comments say this is not working (and I couln't make it work either).
Try using the following js function.
function download()
{
window.location = '<<your file name with full path>>';
//for ex. function download()
//window.location = 'mobilepayreport.xls';
}
I also had the issue in safari.You can create and download the csv file in safari.But until your file is not physically stored on any location it does not show the file name and type in download popup(it always shows unknown).So I suggest pass the data as html in server side code using ajax and create a file and and with response of that call create the link of file which you stored from server side code.download the file and then you can delete this file.
Following Problem: this Code isn't working in IE9. And in an actual Chrome Browser it is working but the downloaded file is corrupt (the "corrupted file" part also could happen elsewhere ... any suggestion how to do it in IE9 would be nice ).
var file = records[0].data.Files[0].Value.Buffer;
var fileName = records[0].data.Files[0].Value.FileName;
var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob([file], { type: 'application/octet-stream' }));
a.download = fileName;
document.body.appendChild(a)
a.click();
document.body.removeChild(a)
I am prompting window on desktop to save file on local device by using following code
if (finalResult == '') {
alert("Invalid data");
return;
}
var result2 = nameObject.personalInfo[0].Name;
var result3 = nameObject.personalInfo[0].Number;
var fileName = result2 + result3;
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();
By this user can get CSV into excel. Will same code work for android devices?
If not then please suggest me alternatives.
Thank you