PDA

View Full Version : Downloading excel file in IE11 browser



vick_44
28 Sep 2016, 7:03 AM
we have below piece of code which helps in downloading the store object to excel file. The below code works great in chrome and mozilla browser but fails to work on IE 11. Am not sure where the problem is, IE developer console doesnt show any error.


When used in IE, instead of a window popup for download it opens a new tab with base64 encoded string in the URL box.


Is it that window.btoa() the culprit, alternatively i tried by having a condition there to see if window.btoa function exists and then decide to call that or custom base64 encoder but that did not resolve the problem.


code snippet is as below






//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);







so the above code works fine in chrome and mozilla. In IE it opens up a new tab with below content in URL.



data:application/vnd.ms-excel;base64, <<base64 encoded string follows>>


any help or pointers is deeply appreciated.

Gary Schlosberg
28 Sep 2016, 9:32 AM
I haven't heard of this issue. With which specific version of 4.x are you seeing this problem?

vick_44
29 Sep 2016, 12:26 AM
I am using 4.2.

Update: verified on 6.0.1.250 as well, the above code doesnt seem to work for IE.

vick_44
29 Sep 2016, 5:40 AM
I tried this just now, if i paste below dummy url in mozilla/chrome it prompts for download and it does go ahead and download a dummy file.


data:application/vnd.ms-excel;base64,blahblah

if i paste the same above line in IE, it does nothing. Is it that we have to take different approach than above for IE browser?

vick_44
4 Oct 2016, 4:27 AM
was able to overcome this problem with below steps:

> created a JSP file say, importer.jsp with below contents.



<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page import="java.io.*" %>


<%
response.setHeader("Pragma","public");
response.setHeader("Expires","0");
response.setHeader("Cache-Control","must-revalidate, post-check=0, pre-check=0");
response.setHeader("Content-Type","application/force-download");
response.setHeader("Content-Type","application/vnd.ms-excel");
response.setHeader("Content-Disposition", "attachment; filename=export2excel.xls");
response.setHeader("Content-Type","application/vnd.ms-excel");
response.setHeader("Content-Disposition", "attachment; filename=export2excel.xls");


String h=request.getParameter("ex");
try {
PrintWriter pw = response.getWriter();


//out.println(request.getParameter("ex"));
pw.println(request.getParameter("ex"));


//clean up
pw.close();
} catch(IOException e) {
out.println(e.getMessage());
}
%>



now you can consider a conditional block , pseudo code shown below



if (not an IE browser)
the code posted in first thread.
else
var dataURL = 'importer.jsp';
params =[{
name: 'ex',
value: xmlString
},{
name: 'FileName',
value: 'excel.xls'
}];
post_to_url(dataURL, params, 'post');

function post_to_url(path, params, method) {
method = method || "post";
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);
for(var i=0; i<params.length; i++) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", params[i].name);
hiddenField.setAttribute("value", params[i].value);
form.appendChild(hiddenField);
}

document.body.appendChild(form);
form.submit();

}
}




The above is not my own work, this above adapted solution is taken from below reference. Tried and tested, works like a charm.


http://stackoverflow.com/questions/9059964/extjs-export-to-excel-not-working-in-ie