当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

JS获取Excel数据并显示到页面(IE)

发表于: 2014-08-22   作者:wjiaoling136   来源:转载   浏览:
摘要: 实现效果:从有两个sheet的Excel中获取数据展示到页面中 测试环境:IE8、Excel2003、Excel2007 参考链接:http://blog.csdn.net/tongle_deng/article/details/7713572 说明: 1、不兼容火狐,用的ActiveXObject,ActiveX是IE的,火狐没有,所以不支持。网上有个例子在火狐里面也弄了个类似于Acti

实现效果:从有两个sheet的Excel中获取数据展示到页面中

测试环境:IE8、Excel2003、Excel2007

参考链接:http://blog.csdn.net/tongle_deng/article/details/7713572

说明:

1、不兼容火狐,用的ActiveXObject,ActiveX是IE的,火狐没有,所以不支持。网上有个例子在火狐里面也弄了个类似于ActiveX一样的插件,博主说测试通过可以用,下面的评论说安装了不能用,具体怎么样也不知道。插件博主上传到CSDN了,10个积分,俺没有啊,谁要是下载了给我留个吧!谢谢!

文章链接:http://mozilla.com.cn/post/35931/

插件链接:http://download.csdn.net/detail/xhanhan/4544576

2、因为使用的是IE的ActiveXObject,所以浏览器必须允许ActiveX控件的运行,如果不允许就不能初始化ActiveXObject。

具体设置:IE--->Internet选项--->“安全”选项卡--选中Internet--自定义级别,在打开的“安全设置”里面找到“ActiveX控件和插件”,

"ActiveX控件自动提示"--->"启用"

“对标记为可安全执行脚本的ActiveX控件执行脚本”---“启用”

“对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本”----->“提示”

“仅允许经过批准的域在未经提示的情况下使用ActiveX”-----“启用”

“下载未签名的ActiveX控件”----"提示"

“运行ActiveX控件和插件”----"启用"

 

如果还不行,就把“本地Intranet”也设置成这样,在“可新站点”里面添加上自己的站点。

还不行,重启浏览器

最后,调低浏览器的安全级别。这儿也有一个问题,我用的是IE8,调低安全级别之后,它又会自动调回来。网上说修改注册表有用,我试过了还是会自动改回来,谁要是知道怎么弄,给我留个言啊,万分感激。

 

言归正传,具体代码:

 

HTML:

<html>
<head>
 <title>JS读取Excel中的数据</title>
 </head>
<body>
 <div class="file-box">
<input type='text' name='textfield' id='textfield' class='systext' /> <!--文本框--> 
<input type='button' class='but uploadbtn' value='浏览...' /><!--浏览按钮-->
<input type="file" class="file" size="28" onchange="ReadExcel();" id="upfile"/> <!--真正的浏览按钮,用来打开上传页面,前面的“浏览”按钮掩盖此按钮,为好看-->
 </div>
<br >
<!--效果展示区域-->
<div id="show"></div>
</body>
</html>

 

Style:

<style type="text/css">  
body{ background:none;}
.p_show{ border-collapse:collapse; }
.p_show td{ border:1px solid #ccc; text-align:center; padding-left:10px; padding-right:10px; white-space:nowrap;height:26px; line-height:26px; }
.p_show th{background-color:#e1e1e1; border:1px solid #ccc; text-align:center; padding-left:10px; padding-right:10px; white-space:nowrap;height:26px; line-height:26px; }
.systext{width:238px; height:28px; line-height:28px; float:left; border:1px solid #ccc; }
.file-box{ position:relative;width:640px}
.uploadbtn{ height:30px;  width:60px; margin-left:3px; float:left;  }
.but { width:102px; height:25px; line-height:24px; margin-bottom: 3px; border:0px; background:#1381c9;  color: #fff; cursor:pointer; }
.file{ position:absolute; top:0px; left:0px; height:28px; filter:alpha(opacity:0);opacity: 0;width:310px; line-height:28px; }
</style> 
 JS:
<script type="text/javascript">
  function ReadExcel() {
	   var tempStr = "";
	   //IE8出于安全性的考虑,上传文件时屏蔽了真实的本地文件路径,而以“C:\fakepath\”取代之。
	   //用下面的方法获取文件的路径(只对IE有效)
	   var file_upl = document.getElementById("upfile");
	   file_upl.select();
	   var filePath = document.selection.createRange().text;
	   document.getElementById("textfield").value=filePath;//文本框显示文件路径

	   if(isempty(filePath)){return ;}//若为空,不处理
	   try {  
      	       var oXL = new ActiveXObject("Excel.Application"); //创建操作EXCEL应用程序的实例  
     	   }catch(e) {  
      		alert( "要将该表导出到Excel,您必须安装Excel电子表格软件,同时浏览器须使用“ActiveX 控件”,您的浏览器须允许执行控件。");  
      	        return "";  
     	   }  
	   
	   var oWB = oXL.Workbooks.open(filePath);//打开指定路径的excel文件
	   var count = oWB.worksheets.Count;//sheet的张数
	   var str="";
	   for(var c=1;c<=count;c++){//循环每一张sheet
		   var name =oWB.worksheets(c).name;//每个sheet的名称
		   oWB.worksheets(c).select();//选定要操作的sheet
		   var oSheet = oWB.ActiveSheet;
		   var rows = oSheet.usedrange.rows.count; //行数
		   var columns =oSheet.usedrange.columns.count ;//列数
		   str+="<center><h3>"+name+"</h3></center>"
		   str+="<table  border='0' cellspacing='0' cellpadding='0' class='p_show' width='100%'>";
		   for(var i=1;i<=rows;i++){
		   	str +="<tr>";
		   		if(i==1){	//第一行是th,标题
					for(var j=1;j<=columns;j++){
					//Excel中每一个sheet默认有36列,但并不是每一列都有数据,获取第一行的数据,判断当没有数据时就不再循环并记录columns,下面的数据只需要循环columns列而不再是36列
						if(isempty(oSheet.cells(i,j).value)){
							columns=j-1;
							break;
						}else{
							str+="<th>"+oSheet.cells(i,j).value+"</th>";
						}
					}
		   		}else{
		   			for(var k=1;k<=columns;k++){
						str+="<td>"+setValue(oSheet.cells(i,k).value)+"</td>";
					}
		   		}
		   str +="</tr>"
		   }
		   str+="</table>";
		}
		document.getElementById("show").innerHTML=str;
		 //oWB.close();
		 //退出操作excel的实例对象
	        //oXL.quit();
		oXL.Visible = true; //设置excel为可见  
		//很重要,不能省略,不然会出问题 意思是excel交由用户控制       
		oXL.UserControl = true;    
		oSheet = null;  
		oWB = null;  
		oXL = null;  
	   //手动调用垃圾收集器
	   CollectGarbage();
  }

//设置值,若为空,则用&nbsp;代替
function setValue(_value){
        //处理日期格式的数据:从Excel中获取的日期数据用JS读取出来之后会变成字符串,也就是这种类型:Tue Jul 16 01:07:00 CST 2013,转换成这种类型:yyyy-mm-ddd
	if((_value+" ").indexOf("UTC")!=-1){
		var vDate = new Date(_value);
		_value=(vDate.getFullYear())+"-"+(vDate.getMonth()+1)+"-"+(vDate.getDate());//getDay()获取当前星期X(0-6,0代表星期天)
		return _value;
	}else{
		return isempty(_value)?"&nbsp;":_value;
	}
  }
  /**
*验证js变量的值是否为空,
* true-不存在
* false-存在
* 
*/
function isempty(v){ 
	switch (typeof v){ 
		case 'undefined' : return true;
		case 'string' : if((v.replace(/(^\s*)|(\s*$)/, "")).length == 0) return true; break; 
		case 'boolean' : if(!v) return true; break; 
		case 'number' : if(0 === v) return true; break; 
		case 'object' : 
		if(null === v) return true; 
		if(undefined !== v.length && v.length==0) return true; 
		for(var k in v){return false;} return true; 
		break; 
	} 
return false; 
}
/*
var myDate = new Date();
myDate.getYear();        //获取当前年份(2位)
myDate.getFullYear();    //获取完整的年份(4位,1970-????)
myDate.getMonth();       //获取当前月份(0-11,0代表1月)
myDate.getDate();        //获取当前日(1-31)
myDate.getDay();         //获取当前星期X(0-6,0代表星期天)
myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours();       //获取当前小时数(0-23)
myDate.getMinutes();     //获取当前分钟数(0-59)
myDate.getSeconds();     //获取当前秒数(0-59)
myDate.getMilliseconds();    //获取当前毫秒数(0-999)
myDate.toLocaleDateString();     //获取当前日期
var mytime=myDate.toLocaleTimeString();     //获取当前时间
myDate.toLocaleString( );        //获取日期与时间
*/
</script>

JS获取Excel数据并显示到页面(IE)

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
上一篇我说了怎么将图片保存到数据库,这里我说一下,怎么将图片从数据库中提取出来并显示到页面中
首先显示一下数据库的数据 页面信息 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona
默认ie是自动 看看eclipse控制台有没有报错如: Address already in use: JVM_Bind 1.关闭eclipse,
获取并显示数据 为了向我们的程序提供数据,Adobe Flex包含特别为与HTTP服务器,网络服务或者是远程
获取并显示数据 为了向我们的程序提供数据,Adobe Flex包含特别为与HTTP服务器,网络服务或者是远程
获取并显示数据 为了向我们的程序提供数据,Adobe Flex包含特别为与HTTP服务器,网络服务或者是远程
获取并显示数据 为了向我们的程序提供数据,Adobe Flex包含特别为与HTTP服务器,网络服务或者是远程
获取并显示数据 为了向我们的程序提供数据,Adobe Flex包含特别为与HTTP服务器,网络服务或者是远程
获取并显示数据 为了向我们的程序提供数据,Adobe Flex包含特别为与HTTP服务器,网络服务或者是远程
这个也写的很简单: Code using System; using System.Collections.Generic; using System.Componen
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号