All geek questions in one place

Export to Excel from javascript not working in IE?

In my asp.Net MVC 4 project, I use the Excel export function, which exports the HTML table to an Excel file from the client side using Javascript.

Export functionality works fine in Chromeand out Firefox, but doesn't work in IE(any browser). In IE, it simply opens a new window and nothing happens.

My javascript code is below

function Export(htmltable,filename) {
            var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
            excelFile += "<head>";
            excelFile += "<!--[if gte mso 9]>";
            excelFile += "<xml>";
            excelFile += "<x:ExcelWorkbook>";
            excelFile += "<x:ExcelWorksheets>";
            excelFile += "<x:ExcelWorksheet>";
            excelFile += "<x:Name>";
            excelFile += "{worksheet}";
            excelFile += "</x:Name>";
            excelFile += "<x:WorksheetOptions>";
            excelFile += "<x:DisplayGridlines/>";
            excelFile += "</x:WorksheetOptions>";
            excelFile += "</x:ExcelWorksheet>";
            excelFile += "</x:ExcelWorksheets>";
            excelFile += "</x:ExcelWorkbook>";
            excelFile += "</xml>";
            excelFile += "<![endif]-->";
            excelFile += "</head>";
            excelFile += "<body>";
            excelFile += htmltable.replace(/"/g, '\'');
            excelFile += "</body>";
            excelFile += "</html>";

            var base64data = "base64," + $.base64.encode(excelFile);
            window.open('data:application/vnd.ms-excel;'+ base64data);
 }

I also tried to name the file, for example:

window.open('data:application/vnd.ms-excel;filename=' + filename + ';' + base64data);

but still his name is called "download.xls".

How to fix these problems.

I also found these statements,

If you are targeting Internet Explorer as a browser, you need to look for a different approach, as the current one will not work. From the MSDN library, the Data Protocol section says:

Data URIs are supported only for the following elements and/or attributes.

object (images only)
img
input type=image
link
CSS declarations that accept a URL, such as background, backgroundImage, 
and so on.

Data URIs can be nested.

For security reasons, data URIs are restricted to downloaded resources. Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements.

Any approach to overcome this?

.

+4
2

, IE .

( IE) Generic Handler MVC. ashx "Downloader.ashx". :

    public void ProcessRequest(HttpContext context)
        {
            try
            {
                if (context.Request.QueryString.AllKeys.Contains("fileName"))
                {
                    StreamExcelorWordFile();
                }
            }
            catch (Exception ex)
            {
                HttpContext.Current.Response.Write(ex.Message.ToString());
            }
        }

        public void StreamExcelorWordFile()
        {
            string tableName = HttpContext.Current.Request.QueryString["fileName"].ToString();
            string extensions = HttpContext.Current.Request.QueryString["extension"].ToString();

            //HttpContext.Current.Response.ContentType = "application/force-download";

            string appType = "force-download";
            if (extensions == "xls")
            {
                appType = "vnd.ms-excel";
            }
            else if (extensions == "doc")
            {
                appType = "vnd.ms-word";
            }

            HttpContext.Current.Response.ContentType = "application/" + appType;
            HttpContext.Current.Response.AddHeader("Content-Disposition", "attachment;filename=" + tableName + "." + extensions);

            HttpContext.Current.Response.Write(HttpContext.Current.Request.Form["exportdata"].ToString().Replace("⌐", "<").Replace("¬", ">"));
        }

Javascript :

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title>Excel or Word Downloader</title>

     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <script type="text/javascript">
        function convertToXLS() {
            var rawHTML = '<table>' + $('#tblTest').html() + '</table>';

            Export(rawHTML, 'myExcelFile', 'xls');
        }

        function Export(htmltable, filename, extension) {
            var JsonHndlrx = "Downloader.ashx";

            htmltable = htmltable.replace(/</g, '⌐').replace(/>/g, '¬');

            $("body").append('<form id="exportform" action="' + JsonHndlrx + '?fileName=' + filename + '&extension=' + extension + '" method="post" target="_blank"><input type="hidden" id="exportdata" name="exportdata" /></form>');
            $("#exportdata").val(htmltable);
            $("#exportform").submit().remove();
            return true;
        }
    </script>
</head>
<body>
    <div>
        <table id="tblTest">
            <tr>
                <th>
                    Column1
                </th>
                <th>
                    Column2
                </th>
                <th>
                    Column3
                </th>
            </tr>
            <tr>
                <td>
                    locationA-1
                </td>
                <td>
                    locationA-2
                </td>
                <td>
                    locationA-3
                </td>
            </tr>
            <tr>
                <td>
                    locationB-1
                </td>
                <td>
                    locationB-2
                </td>
                <td>
                    locationB-3
                </td>
            </tr>
            <tr>
                <td>
                    locationC-1
                </td>
                <td>
                    locationC-2
                </td>
                <td>
                    locationC-3
                </td>
            </tr>
        </table>
    </div>
    <div>
        <input id="btnToExcelDownload" type="button" value="Convert Table To XLS" onclick="convertToXLS(); return false;" />
    </div>
</body>
</html>

Wolla! , IE!

+1

uri , blob. IE 10. URI blob .

CSV -

var blob = new Blob([CSV], { type: 'text/csv' });
    if (navigator.msSaveBlob) { // IE 10+
        navigator.msSaveOrOpenBlob(blob, fileName + '.csv');
    }
0

Source: https://habr.com/ru/post/1529730/

More articles:


All Articles