2014-03-03 61 views
4

在我的asp.Net MVC 4項目中,我使用了Excel導出功能,該功能使用Javascript從客戶端導出HTML表格到Excel文件。從JavaScript導出到Excel不工作在IE中?

導出功能在ChromeFirefox中工作正常,但在IE(任何瀏覽器)中都不工作。在IE瀏覽器中,它只是打開一個新窗口,併發生未知事件。

低於我的javascript代碼給出,

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

我也試着將文件命名,如:

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

但還是它的命名,如 'download.xls'。

如何解決這些問題。

我還發現這些說法,

如果你的目標Internet Explorer作爲瀏覽器,你必須尋找一種不同的方法,因爲目前的一個將無法正常工作。從MSDN庫,數據協議的話題說:

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. 

任何方法來克服呢?

任何幫助表示讚賞。

回答

1

出於安全原因,新版本如果IE不再支持生成該格式的文件。

我建議的解決方案(並針對IE進行測試)是爲您的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瀏覽器!

0

如果URI是不工作,然後使用團塊。其工作正常在上述IE 10. 代替URI的使用斑點其工作的罰款。 使用下面的代碼

CSV是你的數據

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