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

最新推荐文章于 2023-11-28 15:55:13 发布

Gavid-jh

最新推荐文章于 2023-11-28 15:55:13 发布

阅读量985

点赞数

分类专栏： easyui 文章标签： easyui datagrid excel

本文链接：https://blog.csdn.net/weixin_42230550/article/details/84110404

版权

easyui 专栏收录该内容

8 篇文章 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><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></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.导出成功！