Easyui的数据纯前端js导出

前言

目前数据导出excel的大多结合后端，大多数原理无非poi，io流。但也不排除部分业务需要前端导出更为便捷。下面实战演示。

页面部分

由于框架原因，前端数据的展示为采用framaker模板+js+easyui，方法是通用的，这个不用担心。

     <!--按钮-->
    <a class="easyui-linkbutton export"  data-options="iconCls:'fa fa-print'">导出数据</a>
      <!--数据表格-->
     <div data-options="region:'center',border:false" style="height: 150px;border-top: 1px solid #D3D3D3">
        <table id="assume_param_dg"></table>
      </div>

js部分(数据表格)

        var dg = $("#assume_param_dg");
         var searchFrom = $("#assume_param_search_from");
        dg.datagrid({
            url: '/actuary/assumeparam/assumeparam/list',
            emptyMsg: "无参数信息",
            idField: "id",
            fit: true,
            rownumbers: true,
            fitColumns: true,
            border: false,
            pagination: true,
            singleSelect: true,
            pageSize: 20,
            columns: [[{
                field: 'policyYear',
                title: '保单年度',
                width: '10%',
                align: 'center',
                fixed: true,
                formatter: function (val) {
                    if (val == '' || val == null) {
                        dg.datagrid('hideColumn', 'policyYear');
                    } else {
                        dg.datagrid('showColumn', 'policyYear');
                        return val;
                    }
                }
            }, {
                field: 'policyMonth',
                title: '保单月度',
                width: '10%',
                align: 'center',
                fixed: true,
                formatter: function (val) {
                    if (val == '' || val == null) {
                        dg.datagrid('hideColumn', 'policyMonth');
                    } else {
                        dg.datagrid('showColumn', 'policyMonth');
                        return val;
                    }
                }
            },  {
                field: 'discountTable',
                title: 'Discount Rate Tables',
                width: '10%',
                align: 'center',
                fixed: true,
                formatter: function (val) {
                    if (val == '' || val == null) {
                        dg.datagrid('hideColumn', 'discountTable');
                    } else {
                        dg.datagrid('showColumn', 'discountTable');
                        return val;
                    }
                }
            }]]
        });

导出js

数据处理看个人情况，由于我这里是动态查询的结果，有数据的列显示，没有数据的列隐藏，所以获取的rows是所有列的数据，所以针对没有数据的列删除；如果不对json数据进行替换，它默认导出的表格头是json数据中的key。可以在得到json数据时，对表头处理。

       searchFrom.on('click', 'a.export', function () {
           // 获取选中行
           var rows = dg.treegrid("getRows");
           for (var i = 0; i < rows.length; i++) {    //进行数据处理
             if(rows[i].policyYear == null){
                   delete rows[i].policyYear;
               }
               if(rows[i].policyMonth == null){
                   delete rows[i].policyMonth;
               }
            if(rows[i].discountTable == null){
                   delete rows[i].discountTable;
               }
             
               //直接移除不要的字段
               delete rows[i].id；  
           }

           //转化为json对象
           var data = JSON.stringify(rows);
           //替换中文标题
           var a = data.replace(/policyYear/g, "保单年度").replace(/policyMonth/g, "保单月度").replace(/discountTable/g, "Discount Rate Tables");
           if (a == '')
               return;
           JSONToCSVConvertor(a, "", true);

        });
             //表格导出开始，将json对象导出为CSV文件
            function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
                //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
                var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData)
                    : JSONData;

                var CSV = '';
                //Set Report title in first row or line
                CSV += ReportTitle + '\r';

                //This condition will generate the Label/Header
                if (ShowLabel) {
                    var row = "";

                    //此循环将取出每列的标题
                    for ( var index in arrData[0]) {

                        //Now convert each value to string and comma-seprated
                        row += index + ',';

                    }

                    //这里row为json对象的各个字段名。若是需要将字段名转化为中文可在这里替换
                    row = row.slice(0, -1);
                    console.log(1);
                    console.log(row);


                    //append Label row with line break
                    CSV += row + '\r\n';
                }

                //1st loop is to extract each row
                for (var i = 0; i < arrData.length; i++) {
                    var row = "";
                    //2nd loop will extract each column and convert it in string comma-seprated
                    for ( var index in arrData[i]) {
                        row += '"' + arrData[i][index] + '",';
                    }
                    row.slice(0, row.length - 1);

                    //add a line break after each row
                    CSV += row + '\r\n';
                }
                if (CSV == '') {
                    alert("Invalid data");
                    return;
                }
                //Generate a file name
                var fileName = "导出参数值信息";
                //this will remove the blank-spaces from the title and replace it with an underscore
                fileName += ReportTitle.replace(/ /g, "_");

                //Initialize file format you want csv or xls
                var uri = 'data:text/csv;charset=utf-8,\ufeff' +encodeURI(CSV);

                // Now the little tricky part.
                // you can use either>> window.open(uri);
                // but this will not work in some browsers
                // or you will not get the correct file extension    
                //this trick will generate a temp <a /> tag
                var link = document.createElement("a");
                link.href = uri;
                //set the visibility hidden so it will not effect on your web-layout
                link.style = "visibility:hidden";
                link.download = fileName + ".csv";
                //this part will append the anchor tag and remove it after automatic click
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }         

效果展示图

导出的是csv格式文件，如果需要xls格式可能还得结合后端，为了演示方便，我这里只是写了部分字段，原理是一样的。

导出：
参考链接：https://blog.youkuaiyun.com/qq_31702121/article/details/81131769
https://www.cnblogs.com/kingdudu/p/4863980.html