jqGrid 实现表格导出Excel功能

叁歲伎倆 2023-10-05 10:45 21阅读 0赞

1、实现代码

//读取表格内容
    function jqgridToExcel1(id, fileName) {
        var Table = $("#gview_" + id);
        var Tal = $("#" + id);
        var tableStr = '<table border="1"><thead>{thead}</thead>{tbody}</table>';
        var thtr = Table.children("div:eq(1)").children("div").children("table").children("thead").children('tr');//获取jqgrid的表头tr
        var tbtr = Tal.children("tbody").children('tr');//获取jqgrid内容tr
        var thrlength = thtr.length;//表头tr数
        var tbrlength = tbtr.length;//内容tr数
        var theadStr = '';
        var tbodyStr = '';
    
        for (i = 0; i < thrlength; i++) {//循环获取表头每条tr内容
            if (thtr[i].style.height != 'auto') {//获取height不为auto的tr内容
                theadStr += '<tr>';
                var th2 = Table.children("div:eq(1)").children("div").children("table").children("thead").children('tr:eq(' + i + ')').children('th');
                var th2length = th2.length;
                var th2th = '';
                for (y = 0; y < th2length; y++) {//循环获取tr内display不为none的td，并递加
                    if (th2[y].style.display != 'none') {
                        th2th += "<th>" + th2[y].innerText + "</th>";
                    }
                }
                theadStr += th2th;
                theadStr += '</tr>'
            }
        }
    
        for (i = 1; i < tbrlength; i++) {//循环获取内容每条tr内容
            tbodyStr += '<tr>';
            var td2 = Tal.children("tbody").children('tr:eq(' + i + ')').children('td');
            var td2length = td2.length;
            var td2td = '';
            for (y = 0; y < td2length; y++) {
                if (td2[y].style.display != 'none') {
                    td2td += "<td>" + td2[y].innerText + "</td>";
                }
            }
            tbodyStr += td2td;
            tbodyStr += '</tr>'
        }
    
        tableStr = format(tableStr, {
            thead: theadStr,
            tbody: tbodyStr
        });
        tableToExcel(tableStr, fileName);
    
    };
    //替换thead,tbody
    function format(s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) };
    //导出Excel
    function tableToExcel (table, fileName) {
        var blob = new Blob([table], { type: "application/vnd.ms-excel" });
        if (($('body').hasClass('IE') || $('body').hasClass('InternetExplorer')) && window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveBlob(blob, fileName + '.xls');
        }
        else {
            var blob = new Blob([table], { type: "application/vnd.ms-excel" });
            let href = window.URL.createObjectURL(blob);
            var a = document.createElement('a');
            document.body.appendChild(a);
            a.hreflang = 'zh';
            a.charset = 'utf8';
            a.href = href;
            a.download = fileName + '.xls';
            a.click();
            document.body.removeChild(a);
        }
    
    };

2、调用

HTML代码：

JS代码：

jqgridToExcel1("GridData","导出数据");