layui treeGrid树形表格数据导出excel文件

1，效果图

界面显示

导出效果

2，数据格式

注意：一条记录里面不能出现 id 和 parentId 同值得情况，否则收缩数据得箭头不会出来

4，引入文件

xlsx.full.min.js

5，代码

 //触发按钮
 <button type="button" onclick="exportcalcdetail()">导出结果</button>
  
 //树形表格
 <div>
	<table id="fapztable" lay-filter="faptool" style="margin-bottom: 0px;"></table>
 </div>
 

//树形表格
 function fpgrid(data) {
        var treeTable = layui.treeGrid;
        //第2个实例
        treeTable.render({
            elem: '#fapztable',
            height: "full-30",
            idField: 'id',
            size: 'sm', //小尺寸的表格
            page: true, //开启分页
            limits: [15, 30, 50, 100, 200, 500, 5000, 10000, 20000, 50000],
            limit: 20000,
            sort: true,
            totalRow: true,
            totalRowAll: true,
            /*cellMinWidth: 100,*/
            treeId: 'id', //树形id字段名称
            treeUpId: 'parentId',//树形父id字段名称
            treeShowName: 'unitclass',//以树形式显示的字段
            cols: [
                [ //表头
                    {field: 'unitclass', title: '分摊类别', width: 140, align: 'left', halign: 'center'},
                    {field: 'UNITCODE', title: '核算单元代码', width: 140, align: 'left', halign: 'center'},
                    {field: 'UNITNAME',title: '核算单元名称',width: 200,align: 'left',halign: 'center'},
                ]
            ],
            data: data ? data : [],
            filter: {
                bottom: false
            },
            done: function () {
                layui.soulTable.render(this)
                // $("[data-field='ID']").css('display','none');
            }
        });

        treeTable.on('rowDouble(faptool)', function (obj) {
            obj.tr.addClass('layui-bg-orange').siblings().removeClass('layui-bg-orange');
        })
    }
    

//引入文件
<script type="text/javascript" src="${ctx}/static/js/xlsx.full.min.js"></script>


//导出功能函数

<script>
    function exportcalcdetail() {
        var wopts = {
            bookType: 'xlsx',
            bookSST: false,
            type: 'binary'
        };
        var workBook = {
            SheetNames: ['Sheet1'],
            Sheets: {},
            Props: {}
        };
        function json2Excel() {
            //待展示的数据，可能是从后台返回的json数据或者是自己定义的object fapztable
            var dataList = layui.treeGrid.cache['fapztable'].data.list;
            //var dataexport = JSON.parse(JSON.stringify(dataList));
            var  dataexport =  new Array();
            for (var  i=0; i< dataList.length; i++) {
                var ObjOneThis = dataList[i];
                var ObjOne={};
                //字段信息
                ObjOne.unitclass=ObjOneThis.unitclass;
                ObjOne.UNITCODE=ObjOneThis.UNITCODE;
                ObjOne.UNITNAME=ObjOneThis.UNITNAME;
                dataexport.push(ObjOne);
            }

            //展示的顺序，把data中对象的属性按照你想要的顺序排放就可以了
            var header = ["unitclass", "UNITCODE","UNITNAME"];
            //展示的名称
            var headerDisplay = {unitclass:"分摊类别", UNITCODE:"核算单元代码", UNITNAME:"核算单元名称"};
            //将表头放到原始数据里面去，要保证表头在数组的最前面
            var newData = [headerDisplay, ...dataexport];

            //加了一句skipHeader:true，这样就会忽略原来的表头
            workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(newData, {header:header, skipHeader:true});

            //1、XLSX.utils.json_to_sheet(data) 接收一个对象数组并返回一个基于对象关键字自动生成的“标题”的工作表，
            // 默认的列顺序由使用Object.keys的字段的第一次出现确定
            //2、将数据放入对象workBook的Sheets中等待输出
            //workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(dataSource)

            //3、XLSX.write() 开始编写Excel表格
            //4、changeData() 将数据处理成需要输出的格式
            //saveAs(new Blob([changeData(XLSX.write(workBook, wopts))], {type: 'application/octet-stream'}))
            openDownloadDialog(new Blob([changeData(XLSX.write(workBook, wopts))], {type: 'application/octet-stream'}),'文件名.xlsx');
        }

        function openDownloadDialog(url, saveName) {
            if (typeof url == 'object' && url instanceof Blob) {
                url = URL.createObjectURL(url); // 创建blob地址
            }
            var aLink = document.createElement('a');
            aLink.href = url;
            aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
            var event;
            if (window.MouseEvent) event = new MouseEvent('click');
            else {
                event = document.createEvent('MouseEvents');
                event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            }
            aLink.dispatchEvent(event);
        }

        function changeData(s) {

            //如果存在ArrayBuffer对象(es6) 最好采用该对象
            if (typeof ArrayBuffer !== 'undefined') {

                //1、创建一个字节长度为s.length的内存区域
                var buf = new ArrayBuffer(s.length);

                //2、创建一个指向buf的Unit8视图，开始于字节0，直到缓冲区的末尾
                var view = new Uint8Array(buf);

                //3、返回指定位置的字符的Unicode编码
                for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
                return buf;

            } else {
                var buf = new Array(s.length);
                for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
                return buf;
            }
        }
        json2Excel();
    }
</script>