首页 > 网页设计 > js导出table中的EXCEL总结

js导出table中的EXCEL总结

导出EXCEL一般是用PHP做,但是项目中,有时候PHP后端工程师返回的数据不是我们想要的,作为前端开发工程师,把对应的数据编号转换为文字后,展示给用户,但是,需求要把数据同时导出一份EXCEl。无奈之下,我只能用js导出table中的数据了。

   导出EXCEl一般是自己人用的,所以用js导出,因为js导出EXCEL一般情况下兼容性不是很好,很多只是兼容IE浏览器,还要设置在工具栏中进行设置才能导出,因为会相对比较烦。下面介绍几种方法:

一、js导出EXCEl带单元格合并【已验证,比较好用】

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片

  1. // JavaScript Document  
  2. //调用方法  
  3. //   var test=new PageToExcel("data",0,255,"测试.xls");//table id , 第几行开始,最后一行颜色 ,保存的文件名  
  4. //   test.CreateExcel(false);  
  5. //   test.Exec();  
  6. //   test.SaveAs();  
  7. //   test.CloseExcel();  
  8. //LastRowColor 0黑色 255红色  
  9. //  
  10.   
  11.   
  12.   
  13.   
  14. function PageToExcel(TableID,FirstRow,LastRowColor,SaveAsName){  
  15. this.lastRowColor=LastRowColor==""?0:LastRowColor;  
  16. var today=new Date();  
  17. this.saveAsName=(SaveAsName==""?today.getYear()+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日.xls":SaveAsName);  
  18. this.tableId=TableID;  
  19. this.table=document.getElementById(this.tableId);//导出的table 对象  
  20. this.rows=this.table.rows.length;//导出的table总行数  
  21. this.colSumCols=this.table.rows[0].cells.length;//第一行总列数  
  22. this.fromrow=FirstRow;  
  23. this.beginCol=0; //起始列数  
  24. this.cols=this.colSumCols;  
  25. this.oXL=null;  
  26. this.oWB=null;  
  27. this.oSheet=null;  
  28. this.rowSpans=1; //行合并  
  29.     this.colSpans=1; //列合并  
  30.     this.colsName={0:"A",1:"B", 2:"C", 3:"D", 4:"E", 5:"F", 6:"G", 7:"H", 8:"I",9:"J", 10:"K", 11:"L", 12:"M", 13:"N", 14:"O", 15:"P", 16:"Q", 16:"R" ,18:"S", 19:"T", 20:"U", 21:"V", 22:"W", 23:"X", 24:"Y", 25:"Z"};  
  31. }  
  32. PageToExcel.prototype.DeleteExcelCols=function(NotShowColList){//数组NotShowColList  
  33.     //this.notShowColList=NotShowColList;//不显示列集合,1,2,3,1  
  34.     //删除excel中的列  
  35.    var m=0;  
  36.    for(var i=0;i<NotShowColList.length;i++){  
  37.          if(i>0){  
  38.             m++;  
  39.          }  
  40.         var temp=NotShowColList[i]- m;  
  41.         var index=this.colsName[temp];  
  42.    this.oSheet.Columns(index).Delete;//删除  
  43.    }  
  44.    m=0;  
  45. }  
  46.   
  47.       
  48. PageToExcel.prototype.CreateExcel=function(ExcelVisible)  
  49. {  
  50.    try{  
  51.    this.oXL = new ActiveXObject("Excel.Application"); //创建应该对象  
  52.    this.oXL.Visible = ExcelVisible;  
  53.    this.oWB = this.oXL .Workbooks.Add();//新建一个Excel工作簿  
  54.     this.oSheet = this.oWB.ActiveSheet;//指定要写入内容的工作表为活动工作表  
  55.    //不显示网格线  
  56.    this.oXL.ActiveWindow.DisplayGridlines=false;  
  57.    }catch(e){  
  58.     alert("请确认安装了非绿色版本的excel!"+e.description);  
  59.     CloseExcel();  
  60.    }  
  61. }  
  62.   
  63. PageToExcel.prototype.CloseExcel=function()  
  64. {  
  65.     this.oXL.DisplayAlerts = false;     
  66.             this.oXL.Quit();     
  67.             this.oXL = null;     
  68.             this.oWB=null;     
  69.             this.oSheet=null;   
  70. }  
  71.   
  72. PageToExcel.prototype.ChangeElementToLabel=function (ElementObj){  
  73.    var GetText="";  
  74.    try{  
  75.    var childres=ElementObj.childNodes;  
  76.     
  77.    }catch(e){ return GetText}  
  78.    if(childres.length<=0) return GetText;  
  79.    for(var i=0;i<childres.length;i++){  
  80.    try{if(childres[i].style.display=="none"||childres[i].type.toLowerCase()=="hidden"){continue;}}  
  81.    catch(e){}  
  82.       
  83.      try{  
  84.       switch (childres[i].nodeName.toLowerCase()){  
  85.         case "#text" :  
  86.          GetText +=childres[i].nodeValue ;  
  87.          break;  
  88.         case "br" :  
  89.          GetText +="\n";  
  90.          break;  
  91.         case "img" :  
  92.          GetText +="";  
  93.          break;  
  94.         case "select" :  
  95.          GetText +=childres[i].options[childres[i].selectedIndex].innerText ;  
  96.          break;  
  97.         case "input" :  
  98.          if(childres[i].type.toLowerCase()=="submit"||childres[i].type.toLowerCase()=="button"){  
  99.           GetText +="";  
  100.          }else if(childres[i].type.toLowerCase()=="textarea"){  
  101.           GetText +=childres[i].innerText;  
  102.          }else{  
  103.           GetText +=childres[i].value;  
  104.          }  
  105.          break;  
  106.         default :  
  107.          GetText += this.ChangeElementToLabel(childres[i]);  
  108.          break;  
  109.       }  
  110.        
  111.      }catch(e){}  
  112.    }  
  113.    return GetText;  
  114. }  
  115. PageToExcel.prototype.SaveAs=function (){  
  116.    //保存  
  117.    try{  
  118.     this.oXL.Visible =true;  
  119.     var fname = this.oXL.Application.GetSaveAsFilename(this.saveAsName, "Excel Spreadsheets (*.xls), *.xls");   
  120.     if(fname){   
  121.     this.oWB.SaveAs(fname);  
  122.      this.oXL.Visible =false;  
  123.     }  
  124.    }catch(e){};   
  125. }  
  126. PageToExcel.prototype.Exec=function()  
  127. {  
  128.     
  129.    //寻找列数,考虑到第一行可能存在  
  130.    for (var i=0; i<this.colSumCols;i++) {  
  131.     var tmpcolspan = this.table.rows(0).cells(i).colSpan;  
  132.     if ( tmpcolspan>1 ) {  
  133.      this.cols += tmpcolspan-1;  
  134.     }  
  135.    }  
  136.     
  137.    //定义2维容器数据,1:行;2:列;值(0 可以填充,1 已被填充)  
  138.    var container=new Array(this.rows);  
  139.    for (var i=0;i<this.rows;i++) {  
  140.     container[i]=new Array(this.cols);  
  141.     for (j=0;j<this.cols;j++) {  
  142.      container[i][j]=0;  
  143.     }  
  144.    }  
  145.     
  146.    //将所有单元置为文本,避免非数字列被自动变成科学计数法和丢失前缀的0  
  147.    this.oSheet.Range(this.oSheet.Cells(this.fromrow+1,1), this.oSheet.Cells(this.fromrow+this.rows,this.cols)).NumberFormat = "@";  
  148.    // 循环行  
  149.    for (i=0;i<this.rows;i++){  
  150.     //循环列  
  151.     for (j=0;j<this.cols;j++){  
  152.      //寻找开始列  
  153.      for (k=j;k<this.cols;k++){  
  154.       if (container[i][k]==0) {  
  155.        this.beginCol=k;  
  156.        k=this.cols; //退出循环  
  157.       }  
  158.      }  
  159. //try{  
  160.       //赋值  
  161.       //此处相应跟改 根据 标签的类型,替换相关参数  
  162.       this.oSheet.Cells(i+1+this.fromrow,this.beginCol+1).value = this.ChangeElementToLabel(this.table.rows(i).cells(j));  
  163.         
  164.       
  165.       //计算合并列  
  166.       try{  
  167.      this.colSpans = this.table.rows(i).cells(j).colSpan;  
  168.       }catch(e){  
  169.      this.colSpans=0     
  170.      }  
  171.      if (this.colSpans>1) {  
  172.       //合并  
  173.       this.oSheet.Range(this.oSheet.Cells(i+1+this.fromrow,this.beginCol+1),this.oSheet.Cells(i+1+this.fromrow,this.beginCol+this.colSpans)).Merge();  
  174.      }  
  175.      //将当前table位置填写到对应的容器中  
  176.      for (k=0; k<this.colSpans;k++) {  
  177.       container[i][this.beginCol+k]= 1;  
  178.      }  
  179.      // 计算合并行  
  180.       
  181.      try{  
  182.       this.rowSpans = this.table.rows(i).cells(j).rowSpan;  
  183.        }catch(e){  
  184.        this.rowSpans = 0;  
  185.      }  
  186.       
  187.      if (this.rowSpans>1) { //行合并  
  188.       this.oSheet.Range(this.oSheet.Cells(i+1+this.fromrow,this.beginCol+1),this.oSheet.Cells(i+this.rowSpans+this.fromrow,this.beginCol+this.colSpans)).Merge();  
  189.       //将当前table位置填写到对应的容器中  
  190.       for (k=1; k<this.rowSpans;k++) { //由于第0行已经被colSpans对应的代码填充了,故这里从第1行开始  
  191.        for (l=0;l<this.colSpans;l++) {  
  192.         container[i+k][this.beginCol+l]=1;  
  193.        }  
  194.       }  
  195.      }  
  196.      //如果开始列+合并列已经等于列数了,故不需要再循环html table  
  197.      if (this.beginCol+this.colSpans>=this.cols) j=this.cols;  
  198.      
  199.     }  
  200.     if(i==0)  
  201.     {  
  202.      //标题栏  
  203.      this.oSheet.Range(this.oSheet.Cells(1,1), this.oSheet.Cells(1,1)).Font.Size=20;   
  204.      this.oSheet.Range(this.oSheet.Cells(1,1), this.oSheet.Cells(1,1)).Font.Bold = true;   
  205.      this.oSheet.Range(this.oSheet.Cells(1,1), this.oSheet.Cells(1,1)).HorizontalAlignment = -4108; //居中  
  206.      this.oSheet.Range(this.oSheet.Cells(1,1), this.oSheet.Cells(1,1)).Rows.RowHeight = 40;  
  207.     }  
  208.      //自动调整行高  
  209.    }  
  210.     
  211.     
  212.    //最后一行是否空色  
  213.    try{  
  214.     this.oSheet.Range(this.oSheet.Cells(this.rows,1), this.oSheet.Cells(this.rows,1)).Font.Color=this.lastRowColor;  
  215.    }catch(e){}  
  216.    this.oSheet.Range(this.oSheet.Cells(this.fromrow+2,1), this.oSheet.Cells(this.fromrow+this.rows,this.cols)).Rows.RowHeight=20;   
  217.    this.oSheet.Range(this.oSheet.Cells(this.fromrow+2,1), this.oSheet.Cells(this.fromrow+this.rows,this.cols)).Font.Size=10;  
  218.    //自动换行  
  219.    this.oSheet.Range(this.oSheet.Cells(this.fromrow+2,1), this.oSheet.Cells(this.fromrow+this.rows,this.cols)).WrapText = true;  
  220.    //自动调整列宽  
  221.    this.oSheet.Range(this.oSheet.Cells(this.fromrow+1,1), this.oSheet.Cells(this.fromrow+this.rows,this.cols)).Columns.AutoFit();  
  222.    //点虚线  
  223.    this.oSheet.Range(this.oSheet.Cells(this.fromrow+1,1), this.oSheet.Cells(this.fromrow+this.rows,this.cols)).Borders.LineStyle = -4118;  
  224.     
  225.       
  226.    return this.rows;  
  227. }  


注意:要改IE浏览器安全设置


 


 

 

二、js导出table中的EXCEL.该方法只能在IE内核下运行,相比其他方法的好处是,不

用再设置什么属性或者安装什么插件了,思路如下

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片

  1. function getXlsFromTbl(inTblId, inWindow) {  
  2.      try {  
  3.          var allStr = "";  
  4.          var curStr = "";  
  5.          //alert("getXlsFromTbl");  
  6.          if (inTblId != null && inTblId != "" && inTblId != "null") {  
  7.              curStr = getTblData(inTblId, inWindow);  
  8.          }  
  9.          if (curStr != null) {  
  10.              allStr += curStr;  
  11.         }  
  12.         else {  
  13.             alert("你要导出的表不存在!");  
  14.             return;  
  15.         }  
  16.         var fileName = getExcelFileName();  
  17.         doFileExport(fileName, allStr);  
  18.     }  
  19.     catch(e) {  
  20.         alert("导出发生异常:" + e.name + "->" + e.description + "!");  
  21.     }  
  22. }  
  23. function getTblData(inTbl, inWindow) {  
  24.     var rows = 0;  
  25.     //alert("getTblData is " + inWindow);  
  26.     var tblDocument = document;  
  27.     if (!!inWindow && inWindow != "") {  
  28.         if (!document.all(inWindow)) {  
  29.             return null;  
  30.         }  
  31.         else {  
  32.             tblDocument = eval(inWindow).document;  
  33.         }  
  34.     }  
  35.     var curTbl = tblDocument.getElementById(inTbl);  
  36.     var outStr = "";  
  37.     if (curTbl != null) {  
  38.         for (var j = 0; j < curTbl.rows.length; j++) {  
  39.             for (var i = 0; i < curTbl.rows[j].cells.length; i++) {  
  40.                 if (i == 0 && rows > 0) {  
  41.                     outStr += " \t";  
  42.                     rows -= 1;  
  43.                 }  
  44.                 outStr += curTbl.rows[j].cells[i].innerText + "\t";  
  45.                 if (curTbl.rows[j].cells[i].colSpan > 1) {  
  46.                     for (var k = 0; k < curTbl.rows[j].cells[i].colSpan - 1; k++) {  
  47.                         outStr += " \t";  
  48.                     }  
  49.                 }  
  50.                 if (i == 0) {  
  51.                     if (rows == 0 && curTbl.rows[j].cells[i].rowSpan > 1) {  
  52.                         rows = curTbl.rows[j].cells[i].rowSpan - 1;  
  53.                     }  
  54.                 }  
  55.             }  
  56.             outStr += "\r\n";  
  57.         }  
  58.     }  
  59.     else {  
  60.         outStr = null;  
  61.         alert(inTbl + "不存在!");  
  62.     }  
  63.     return outStr;  
  64. }  
  65. function getExcelFileName() {  
  66.     var d = new Date();  
  67.     var curYear = d.getYear();  
  68.     var curMonth = "" + (d.getMonth() + 1);  
  69.     var curDate = "" + d.getDate();  
  70.     var curHour = "" + d.getHours();  
  71.     var curMinute = "" + d.getMinutes();  
  72.     var curSecond = "" + d.getSeconds();  
  73.     if (curMonth.length == 1) {  
  74.         curMonth = "0" + curMonth;  
  75.     }  
  76.     if (curDate.length == 1) {  
  77.         curDate = "0" + curDate;  
  78.     }  
  79.     if (curHour.length == 1) {  
  80.         curHour = "0" + curHour;  
  81.     }  
  82.     if (curMinute.length == 1) {  
  83.         curMinute = "0" + curMinute;  
  84.     }  
  85.     if (curSecond.length == 1) {  
  86.         curSecond = "0" + curSecond;  
  87.     }  
  88.     var fileName = "91zaojia" + "_" + curYear + curMonth + curDate + "_"  
  89.             + curHour + curMinute + curSecond + ".xls";  
  90.     return fileName;  
  91. }  
  92. function doFileExport(inName, inStr) {  
  93.     var xlsWin = null;  
  94.     if (!!document.all("glbHideFrm")) {  
  95.         xlsWin = glbHideFrm;  
  96.     }  
  97.     else {  
  98.         var width = 6;  
  99.         var height = 4;  
  100.         var openPara = "left=" + (window.screen.width / 2 - width / 2)  
  101.                 + ",top=" + (window.screen.height / 2 - height / 2)  
  102.                 + ",scrollbars=no,width=" + width + ",height=" + height;  
  103.         xlsWin = window.open("""_blank", openPara);  
  104.     }  
  105.     xlsWin.document.write(inStr);  
  106.     xlsWin.document.close();  
  107.     xlsWin.document.execCommand('Saveas'true, inName);  
  108.     xlsWin.close();  
  109. }  

改代码已经验证,可以使用。调用很简单,直接用就可以

 
onclick="getXlsFromTbl('functionclickExcel',null);就可以了!

 


本文固定链接: http://www.devba.com/index.php/archives/5746.html | 开发吧

报歉!评论已关闭.