jqurey将Excel读取数据到html的table中

最新推荐文章于 2022-05-24 16:08:40 发布

weixin_34055787

最新推荐文章于 2022-05-24 16:08:40 发布

阅读量453

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript 数据库 ViewUI

原文链接：http://www.cnblogs.com/swallows/p/3682213.html

本文介绍了一种使用VBScript和jQuery实现从本地Excel文件读取数据，并将其展示在网页上的方法。通过创建Excel对象打开文件，读取每个工作表的数据并转换成HTML表格格式。同时针对简单的单元格合并进行了处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接代码。然后注释。

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqurey-ui.js"></script>
<link rel="stylesheet" href="jqurey-ui.css" />
<script type="text/javascript">
function tabit(ul,css,div){//兼容IE的tab实现，原理很简单
         $(div).children().hide();
         $(div).each(function(){
   $(this).children().eq(0).show();
   });
$(ul).each(function(){
   $(this).children().eq(0).addClass(css);
   });
     $(ul).children().click(function(){
        $(this).addClass(css).siblings().removeClass(css);
         var index = $(ul).children().index(this);
         $(div).children().eq(index).show().siblings().hide();
    });
}

//打开本地目录中的excel文件，读取，并写入table
function openExcel(file)
{

  var Excel = new ActiveXObject("Excel.Application");//创建excel对象，由于是office对象所以只能在IE下进行，如果失败的话，请检查dcom设置，为everyone添加权限。详细略；
  Excel.Visible = false;//设置Excel不可见。调试过程中可设置可见，方便查看代码执行情况；
  var workbook = Excel.workbooks.open(file);//打开file文件，返回一个工作簿对象；
  var sheetCount = workbook.Sheets.Count;//返回当前打开工作簿的sheet数，为Tab的创建提供tab参数；
// alert(sheetCount);

  /*$("<ul></ul>").attr("id","ss").appendTo("#tab");
    for(var c=1; c<=sheetCount;c++){
    $("ul").append($("<li></li>").append($("<a>sheet"+c+"</a>").attr("href","#sheet"+c)));
    $("<div>这里是sheet"+c+"</div>").attr("id","sheet"+c).insertAfter($("#ss"));
    //$("#div"+c).addClass("hide");
    *///这里是调用jqurey_ui.js提供的方法，直接生成Tab，但是在IE6下不能正常工作。

    $("#menu").append($("<ul></ul>").attr("id","xx"));
    $("<div></div>").attr("id","con").addClass("con").appendTo("#tab");
    for(var c=1;c<=sheetCount;c++)
    {
        $("#xx").append($("<li>sheet"+c+"</li>").attr("id","sheet"+c));
        $("<div>sheet"+c+"</div>").attr("id","sheet"+c).appendTo("#con").append($("<table></table>").attr("id","t"+c));
        $("sheet"+c).css("overflow","hidden");

//tab栏完成并且添加用于放置table的div
  var workSheet = workbook.workSheets(c);//循环打开指定index的sheet；
  //Excel.Cells.Select;
  //Excel.Selection.Copy();
  //document.all.editdiv.focus();
  //rang = document.selection.createRange();
  //rang.execCommand("Paste");
  //$("#editdiv"). = ActiveSheet.Cells(1, 1).Value;
  //Excel.Visible = true;

//以上为整体复制的。网上弄过来的；
  var row = workSheet.UsedRange.Rows.Count;//返回使用区域的行数
  //alert(row);
  var col = workSheet.UsedRange.columns.Count;//返回使用区域的列数
  //alert(col);
  var i,j;
  try{
  //table.appendTo($("#test"));
  try{
  //$("<table></table>").attr("id","t"+c).appendTo("#sheet"+c);
  }
  catch(e)
  {
    alert("table bad");
    }

//循环读取excel已使用区域的值，若为undefined则设为"";这种方法只能用于简单的excel表格，对于合并单元格的复杂格式表格，还有待补充。当然也可以用excel做数据库。
  for(i=1;i<=row;i++)
  {
      try{
       var tr=$("<tr></tr>").attr("id","tr"+i);
        //tr.appendTo(table);
        $("#t"+c).append(tr);
        }
  catch(e)
  {
    alert("tr bad");
    }
        for(j=1;j<=col;j++)
        {
            //document.write("<td>"+ActiveSheet.Cells(i, j).Value+"</td>");
           //var td=$("<td>"+ActiveSheet.Cells(i, j).Value+"</td>");
           //tr.append(td);
           //td.appendTo(tr);
           var val = workSheet.Cells(i, j).Value;
           if (val==undefined)
           {
               val="";
            }
           //alert(val);
           try{
               var td = $("<td>"+val+"</td>");

               td.appendTo(tr);
           }
  catch(e)
  {
    alert("td bad");
    }
           //document.write(workSheet.Cells(i, j).Value+"<br />");
        }

    }
  }
  catch(ex)
  {

      Excel.Quit();
      alert("bad!");
     }

    //$("#test").append("</table>")
  }
  Excel.Quit();//关闭
  //$("#tab").tabs();

//关闭excel对象;
  tabit("#xx","active","#con");
}
</script>

<style type="text/css">
*{
    padding:0;
    margin:2px;
    font:12px;
    list-style-type:none;
}
table, th, td {
    border: 1px solid #CCC;
    text-align: center;
    overflow: hidden;
    border-collapse: collapse;
}
li {
    color: #466BAE;
    cursor: pointer;
    float: left;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 100px;
    list-style-type: none;
    border: 1px solid #C4C2C2;
}

.active {
  background: #fff;
  font-weight:600;
  border-bottom:2px solid #8db2e3;
}
.hide
{
    display:none;
}
.con{
    overflow:hidden;
    border: solid 1px #CCCCCC;
    clear:both;
}
</style>
</head>
<body>
<form action="">
<noscript><div id="noscript_msg" class="msg">您需要启动JavaScript，才能使用本网页。</div></noscript>
<input type="button" value="打开 Excel" onclick='openExcel("F:/test/test.xls");'><br>
</form>
<div id="tab" style="min-width:420px; min-height:400px; overflow:hidden; border: solid #F00 1px;">
<div id="menu" style="float:left; min-width:350px; min-height:46px; border: solid #FF0 1px;"></div>
</div>
</body>
</html>
=============================================================================================

日后补充

=============================================================================================

好了来补充了。。

先上代码//这段代码是上面代码中蓝色背景的部分的修改版，主要是根据前面一篇转载文字的思路改动从而可以支持简单的合并单元格的读取以及正确的table写入;

for(i=1;i<=row;i++)
  {
      try
      {
          var tr=$("<tr></tr>").attr("id","tr"+i);
          //tr.appendTo(table);
          $("#t"+c).append(tr);
          }
          catch(e)
          {
              alert("tr bad");
            }
        for(j=1;j<=col;j++)
        {
            //document.write("<td>"+ActiveSheet.Cells(i, j).Value+"</td>");
           //var td=$("<td>"+ActiveSheet.Cells(i, j).Value+"</td>");
           //tr.append(td);
           //td.appendTo(tr);
           var RangeArea=getMark(i,j);//getMark用于获取区域引用的地址
           var MergeArea=workSheet.Range(RangeArea).MergeArea;
           if(MergeArea.Address==getAddress(i,j))
           {
               //当前单元格为单一单元格,此时直接取值，写入创建的td中
               var val = workSheet.Cells(i, j).Value;
               if (val==undefined)
               {
                   val="";
                   }
                   //alert(val);
                   try
                   {
                       var td = $("<td>"+val+"</td>");
                       td.appendTo(tr);
                       }
                       catch(e)
                       {
                           alert("td bad");
                           }
                }
                else
                {
                    //当前单元格为拆分单元格，先读取数据(其实是重复数据)，写入创建的td,为他添加了以合并单元格长宽为值的rowspan和colspan，这里为td加入特别的ID。当第2次遍历到该范围，在判断了此单元格任然在合并单元格内时，也就是说我们创建的这个td是重复的，所以后面应该删掉。
                    var mergeRowCount=MergeArea.Rows.Count;
                    var mergeColumnsCount=MergeArea.Columns.Count;
                    var val = workSheet.Cells(i, j).Value;
                    if (val==undefined)
                    {
                        val="";
                    }
                    //alert(val);
                    try
                    {
                        var td = $("<td>"+val+"</td>").attr({rowspan:mergeRowCount,colspan:mergeColumnsCount,id:"td"+i});
                        td.appendTo(tr);
                    }
                    catch(e)
                    {
                        alert("td bad");
                    }
                    if(mergeRowCount>1&&i>1)
                    {
                        var upMergeArea=workSheet.Range(getMark(i-1,j)).MergeArea;
                        if(upMergeArea.Address==MergeArea.Address)
                        $("#td"+i).remove();
                    }
                    if(mergeColumnsCount>1) j+=mergeColumnsCount-1;
                }
                //document.write(workSheet.Cells(i, j).Value+"<br />");
            }
        }
    }