easyui 将datagrid数据框中的数据通过excel导出到本地

﹏ヽ暗。殇╰゛Y 2022-04-16 02:30 421阅读 0赞

**目录**

需求分析

问题解决方式

实现方式

--------------------

# 需求分析 #

> 目前，采用 easyui 为前端框架的项目中，要求将datagrid 表格中的数据以excel的形式导出到本地。

# 问题解决方式 #

> 采用原生 js 语法，实现此功能。

# 实现方式 #

1.创建js文件，将如下js代码复制进去（给easyui的datagrid添加导出excel表格的方法）

//自定义导出excel表格
    var commonUtils = function () {
        $.extend($.fn.datagrid.methods, {
            toExcel: function(jq, filename){
                return jq.each(function(){
                    var uri = 'data:application/vnd.ms-excel;base64,'
                        , template = '<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"><head></head><body><table>{table}</table></body></html>'
                        , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
                        , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
    
                    var alink = $('<a style="display:none"></a>').appendTo('body');
                    var view = $(this).datagrid('getPanel').find('div.datagrid-view');
    
                    var table = view.find('div.datagrid-view2 table.datagrid-btable').clone();
                    var tbody = table.find('>tbody');
                    view.find('div.datagrid-view1 table.datagrid-btable>tbody>tr').each(function(index){
                        $(this).clone().children().prependTo(tbody.children('tr:eq('+index+')'));
                    });
    
                    var head = view.find('div.datagrid-view2 table.datagrid-htable').clone();
                    var hbody = head.find('>tbody');
                    view.find('div.datagrid-view1 table.datagrid-htable>tbody>tr').each(function(index){
                        $(this).clone().children().prependTo(hbody.children('tr:eq('+index+')'));
                    });
                    hbody.prependTo(table);
    
                    var ctx = { worksheet: name || 'Worksheet', table: table.html()||'' };
                    alink[0].href = uri + base64(format(template, ctx));
                    alink[0].download = filename;
                    alink[0].click();
                    alink.remove();
                })
            }
        });
    };
    $.fn.window.defaults.onOpen = commonUtils;

2.将上面创建的 js 文件引用到对应 html 文件中

3. 在html文件所对应的js中进行调用

$('#grid').datagrid('toExcel',"xxxxx表");

3.导出成功！