jqgrid + jsp：导出到 Excel 在 IE 中不起作用

Question

我写了下面的代码来显示 JQGrid table 中的数据，并使用导出到 excel 选项来获取 excel [=22= 中的 jqgrid 加载数据].但是导出到 excel 的选项在 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");
}
}

任何人都可以帮助在 IE 中从 JQGrid 选项实现导出到 Excel 功能，而无需为此编写任何控制器调用。

Answer 1

您可以使用额外的 iframe 并按照 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
}

或

我不建议使用 ActiveX，但由于您需要无需编写服务器端（控制器）代码的解决方案，下面的 hack 可能只对 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;

或

使用服务器端逻辑

jqgrid + jsp：导出到 Excel 在 IE 中不起作用

jqgrid + jsp : Export To Excel not working in IE

jquery

jsp

spring-mvc

jqgrid