jqgrid + jsp：導出到Excel不工作在IE中

Question

我已經編寫了下面的代碼來顯示JQGrid表中的數據並使用export to excel選項來獲取jqgrid加載的數據在excel表單中。但是導出爲ex​​cel的選項在Chrome和Firfox中正常工作，但在JQGrid中不能正常工作。

{ 
var sampleJson = ""; 
var jsonObj; 

function jQGridData(data) { 
     sampleJson = data.toString(); 
     jsonObj = JSON.parse(sampleJson); 

$(document).ready(function() { 

        var grid = $("#list"); 

      $("#list").jqGrid({ 

       datatype: "local", 
       data: jsonObj.data, 
       autoheight:true, 
       shrinkToFit: true,    
       colNames:['ID', 'NAME','DESCRIPTION', 'SCORE','STATUS'], 
        colModel:[ 
          {name:'column1',index:'column1', sorttype:"text", align:"left",sortable:true,editable:true,width:60}, 
           {name:'column2',index:'column2', sorttype:"text",align:"text",editable:true,width:310}, 
           {name:'column3',index:'column3',sorttype:"text",align:"text",editable:true,width:600}, 
           {name:'column4',index:'column4', align:"left",sorttype:"text",editable:true,width:90}, 
           {name:'column5',index:'column5', align:"left",sorttype:"text",editable:true,width:100} 
         ], 
      search:true, 
       pager:'#pager', 
       jsonReader: {cell:""}, 
         rowNum: 8, 
         height:"auto", 
         multiselect:true, 
         imgpath: 'css/images/', 
       rowList: [8, 16, 24, 32,40], 
       sortname: 'id', 
       sortorder: 'asc', 
       viewrecords: true, 
         loadComplete: function() {     
            ModifyGridDefaultStyles();     
         }     
      }); 
        $("#grid").jqGrid('setGridParam', {ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}}); 
      $("#list").jqGrid('navGrid','#pager',{add:false,edit:false,del:false,search:true,refresh:true} 
         ).navButtonAdd('#pager', { 
      id:"ExportToExcel", 
     caption: "Export to Excel", 
     buttonicon: "ui-icon-disk", 
     onClickButton: function(){ 
        exportGrid(); 
     }, 
     position: "last" 
    }).navButtonAdd('#pager',{ 
      id:"email_address", 
      caption:"EMAIL ", 
      buttonicon:"ui-icon-mail-closed", 
      onClickButton: function(){ 
      sendMail(); 
     }, 
      position:"last" 
     }).navButtonAdd('#pager', { 
    caption: "Filter", 
    title: "Toggle Searching Tool bar", 
    buttonicon: 'ui-icon-pin-s', 
    onClickButton: function() { 
     this.toggleToolbar(); 
     if ($.isFunction(this.p._complete)) { 
      this.p._complete.call(this); 
      fixPositionsOfFrozenDivs.call(this); 
     } 
    } 
     }); 
      grid.jqGrid('filterToolbar',{stringResult:true, searchOnEnter:false, defaultSearch:"cn"}); 
      $grid[0].toggleToolbar();  
      $('#list').closest(".ui-jqgrid-bdiv").css({"overflow-y" : "scroll"}); 

     }); 
}  

function sendMail() { 
    var link = 'mailto:noReply@a.com?subject=Message from ' 
      +document.getElementById('email_address').value 
      +'&body='+document.getElementById('email_address').value; 
        window.location.href = link; 
} 
function ModifyGridDefaultStyles() { 
    $('#' + "list" + ' tr').removeClass("ui-widget-content"); 
    $('#' + "list" + ' tr:nth-child(even)').addClass("evenTableRow"); 
    $('#' + "list" + ' tr:nth-child(odd)').addClass("oddTableRow"); 
} 



function exportGrid() 
{ 
    var grid = "#list"; 

    var mya=new Array(); 
    mya=$(grid).getDataIDs(); // Get All IDs 

    var data=$(grid).getRowData(mya[0]);  // Get First row to get the labels 
    var colNames=new Array(); 

    var ii=0; 
    for (var i in data){colNames[ii++]=i;} // capture col names 

    var html=""; 

    var columnNames = $(grid).jqGrid('getGridParam','colNames'); 

    for(i=0;i<columnNames.length-1;i++) 
    { 
     html = html + columnNames[i+1]+"\t"; 
    } 

    html=html+"\n"; 

    for(i=0;i<mya.length;i++) 
    { 
     data=$(grid).getRowData(mya[i]); // get each row 
     for(j=0;j<colNames.length;j++) 
     { 
      html=html+data[colNames[j]]+"\t"; // output each column as tab delimited 
     } 

     html = html + "</tr>"; // output each row with end of line 
    } 
    html = html + "</table></body></html>"; // end of line at the end 

     window.open('data:application/vnd.ms-excel,' + $('#grid_table').html()); 
     e.preventDefault(); 
     Response.AddHeader("Content-Disposition", "attachment;filename=download.xls"); 
} 
} 

能夠在實現從jqGrid的選項在IE中導出到Excel的功能，而無需編寫任何任何控制器調用這個任何人的幫助。

Answer 1

您可以使用額外的I幀和使用下面的代碼爲每this post

<iframe id="frame1" style="display:none"></iframe> 

var ua = window.navigator.userAgent; 
var msie = ua.indexOf("MSIE "); 
// If Internet Explorer 
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))  
{ 
frame1.document.open("txt/html","replace"); 
frame1.document.write(formatted excel data); 
frame1.document.close(); 
frame1.focus(); 
sa=frame1.document.execCommand("SaveAs",true,"test.xls"); 
} 
else 
{ 
         //your chrome, firefox logic 
} 

OR

我不建議使用ActiveX但你需要的解決方案，而無需編寫服務器端（控制器）的代碼，下面的黑客可能會幫助你只是爲了IE。 這是不安全的，你可能需要調整activex的瀏覽器設置。

window.clipboardData.setData("Text", formatted excel data); 
var objExcel = new ActiveXObject ("Excel.Application"); 
objExcel.visible = true; 
var objWorkbook = objExcel.Workbooks.Add; 
var objWorksheet = objWorkbook.Worksheets(1); 
objWorksheet.Paste; 

OR

使用服務器端邏輯