zoukankan      html  css  js  c++  java
  • 前端表格导出-layui复杂表头导出支持ie8+

     
    //jQuery HTML导出Excel文件(兼容IE及所有浏览器)//传入需要导出的table的id
            function HtmlExportToExcel(tableid,filename) {
                //var filename = $('.datatitle').text();
                if (getExplorer() == 'ie' || getExplorer() == undefined) {
                    HtmlExportToExcelForIE(tableid, filename);
                }else {
                    HtmlExportToExcelForEntire(tableid, filename)
                }
            }
            //IE浏览器导出Excel
            function HtmlExportToExcelForIE(tableid, filename) {
                try {             
                    var curTbl = document.getElementById(tableid);  
                    var oXL;  
                    try{  
                        oXL = new ActiveXObject("Excel.Application"); //创建AX对象excel  
                    }catch(e){  
                        alert("无法启动Excel! 如果您确信您的电脑中已经安装了Excel,"+"那么请调整IE的安全级别。 具体操作: "+"工具 → Internet选项 → 安全 → 自定义级别 → 对没有标记为安全的ActiveX进行初始化和脚本运行 → 启用");  
                        return false;  
                    }  
                    var oWB = oXL.Workbooks.Add(); //获取workbook对象  
                    var oSheet = oWB.ActiveSheet;//激活当前sheet  
                    var sel = document.body.createTextRange();  
                    sel.moveToElementText(curTbl); //把表格中的内容移到TextRange中  
                    try{
                        sel.select(); //全选TextRange中内容  
                    }catch(e1){
                        e1.description
                    }
                    sel.execCommand("Copy");//复制TextRange中内容  
                    oSheet.Paste();//粘贴到活动的EXCEL中  
                    oXL.Visible = true; //设置excel可见属性  
                    var fname = oXL.Application.GetSaveAsFilename(filename+".xls", "Excel Spreadsheets (*.xls), *.xls");  
                    oWB.SaveAs(fname);  
                    oWB.Close();  
                    oXL.Quit(); 
                } catch (e) {
                    alert(e.description);
                }
            }
            //非IE浏览器导出Excel
            var HtmlExportToExcelForEntire = (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]; }) }
                return function(table, name) {
                    if (!table.nodeType) { table = document.getElementById(table); }
                    var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
                    var $a=$("<a id='exportToExcel' href='"+uri + base64(format(template, ctx))+"' download='"+name+".xls'></a>");
                    $('body').append($a);
                    document.getElementById("exportToExcel").click();
                    $a.remove();
                }
            })()
            function getExplorer() {
                var explorer = window.navigator.userAgent;
                //ie 
                if (explorer.indexOf("MSIE") >= 0) {
                    return 'ie';
                }
                //firefox 
                else if (explorer.indexOf("Firefox") >= 0) {
                    return 'Firefox';
                }
                //Chrome
                else if (explorer.indexOf("Chrome") >= 0) {
                    return 'Chrome';
                }
                //Opera
                else if (explorer.indexOf("Opera") >= 0) {
                    return 'Opera';
                }
                //Safari
                else if (explorer.indexOf("Safari") >= 0) {
                    return 'Safari';
                }
            }
     
     
    以上代码作为插件引入
    layui table.render中加入以下代码 生产隐藏的table dom元素
            done : function(res, curr, count) {
                //res接口返回的信息;curr得到当前页码;count得到数据总量
                //合并单元格 兼容ie8
                layuiRowspan(['unitname'],1);//支持数组
                createExportDomFun('unitEconomicRunTable');
            }
    var execRowspan = function(fieldName,index,flag){
        // 1为不冻结的情况,左侧列为冻结的情况
        var fixedNode;
        fixedNode = index=="1"?$(".layui-table-body")[index - 1]:(index=="3"?$(".layui-table-fixed-r"):$(".layui-table-fixed-l"));
        // 左侧导航栏不冻结的情况
        var child = $(fixedNode).find("td");
        var childFilterArr = [];
        // 获取data-field属性为fieldName的td
        for(var  i = 0; i < child.length; i++){
          if(child[i].getAttribute("data-field") == fieldName){
            childFilterArr.push(child[i]);
          }
        }
        // 获取td的个数和种类
        var  childFilterTextObj = {};
        for(var i = 0; i < childFilterArr.length; i++){
          //var childText = flag?childFilterArr[i].innerHTML:childFilterArr[i].textContent;
          var childText = childFilterArr[i].innerText;
          //console.log(childText);
          if(childFilterTextObj[childText] == undefined){
            childFilterTextObj[childText] = 1;
          }else{
            var  num = childFilterTextObj[childText];
            childFilterTextObj[childText] = num*1 + 1;
          }
        }
        var canRowspan = true;
        var maxNum;//以前列单元格为基础获取的最大合并数
        var finalNextIndex;//获取其下第一个不合并单元格的index
        var finalNextKey;//获取其下第一个不合并单元格的值
        for(var i = 0; i < childFilterArr.length; i++){
          (maxNum>9000||!maxNum)&&(maxNum = $(childFilterArr[i]).prev().attr("rowspan")&&fieldName!="8"?$(childFilterArr[i]).prev().attr("rowspan"):9999);
          //var  key = flag?childFilterArr[i].innerHTML:childFilterArr[i].textContent;//获取下一个单元格的值
          var key = childFilterArr[i].innerText;//获取下一个单元格的值
          var nextIndex = i+1;
          var tdNum = childFilterTextObj[key];
          var curNum = maxNum<tdNum?maxNum:tdNum;
          if(canRowspan){
            for(var j =1;j<=curNum&&(i+j<childFilterArr.length);){//循环获取最终合并数及finalNext的index和key
              //finalNextKey = flag?childFilterArr[i+j].innerHTML:childFilterArr[i+j].textContent;
              finalNextKey = childFilterArr[i+j].innerText;
              finalNextIndex = i+j;
              if((key!=finalNextKey&&curNum>1)||maxNum == j){
                canRowspan = true;
                curNum = j;
                break;
              }
              j++;
              if((i+j)==childFilterArr.length){
                finalNextKey=undefined;
                finalNextIndex=i+j;
                break;
              }
            }
            childFilterArr[i].setAttribute("rowspan",curNum);
            if($(childFilterArr[i]).find("div.rowspan").length>0){//设置td内的div.rowspan高度适应合并后的高度
              $(childFilterArr[i]).find("div.rowspan").parent("div.layui-table-cell").addClass("rowspanParent");
              $(childFilterArr[i]).find("div.layui-table-cell")[0].style.height= curNum*38-10 +"px";
            }
            canRowspan = false;
          }else{
            childFilterArr[i].style.display = "none";
          }
          if(--childFilterTextObj[key]==0|--maxNum==0|--curNum==0|(finalNextKey!=undefined&&nextIndex==finalNextIndex)){//||(finalNextKey!=undefined&&key!=finalNextKey)
            canRowspan = true;
          }
        }
      
    }
    //合并数据表格行
    var layuiRowspan = function(fieldNameTmp,index,flag){
        var fieldName = [];
        if(typeof fieldNameTmp == "string"){
          fieldName.push(fieldNameTmp);
        }else{
          fieldName = fieldName.concat(fieldNameTmp);
        }
        for(var i = 0;i<fieldName.length;i++){
          execRowspan(fieldName[i],index,flag);
        }
    }
    function createExportDomFun(id){
      var header_tr = $('#'+id+'').next().find(".layui-table-header").find("tr");
      var body_tr = $('#'+id+'').next().find(".layui-table-body").find("tr");
      var header_html = "";
      var body_html = "";
      // 获取表头html,包括单元格的合并
      $.each(header_tr,function (i,tr) {
          var header_th = $(tr).find("th");
          header_html += "<tr>";
          $.each(header_th,function (j,th) {
              var rowspan_num = $(th).attr("rowspan");// 行合并数
              var colspan_num = $(th).attr("colspan");// 列合并数
              if (rowspan_num && !colspan_num){// 只有行合并时
                  header_html += '<th rowspan= "'+ rowspan_num +'">';
              } else if (colspan_num && !rowspan_num){// 只有列合并时
                  header_html += '<th colspan= "'+ colspan_num +'">';
              } else if (rowspan_num && colspan_num){// 行列合并均有时
                  header_html += '<th rowspan= "'+ rowspan_num +'" colspan="'+ colspan_num +'">';
              } else {// 没有发生单元格合并
                  header_html += '<th>';
              }
              header_html += $(th).children().children().text() + '</th>';// 获取表头名称并拼接th标签
          })
          header_html += '</tr>';
      })
      // 获取表格body数据
      $.each(body_tr,function (i,tr) {
          var  body_td = $(tr).find("td");
          body_html += '<tr>';
          $.each(body_td,function (j,td) {
              body_html += '<td>' + $(td).children().text() + '</td>';
          })
          body_html += '</tr>';
      })
      $('#'+id+' tr').remove();// 清除之前的doom结构
      $('#'+id+'').append(header_html).append(body_html);
      $('#'+id+'').hide();
    }
  • 相关阅读:
    关于Linux 上建立生成/添加SSH公钥
    sql随机插入数据--记录
    centos 安装搜狗
    centos yum命令找不到包
    命令行改为图形界面
    CentOS7l联网
    .net mvc 框架实现后台管理系统 3
    .net mvc 框架实现后台管理系统 2
    .net mvc 框架实现后台管理系统
    爬取猫眼数据
  • 原文地址:https://www.cnblogs.com/xuwebdesign/p/13722805.html
Copyright © 2011-2022 走看看