JS获取Excel数据并显示到页面（IE）

wjiaoling136

浏览: 954916 次
性别:
来自: 北京

最近访客更多访客>>

747017186

chajinglong

1017401036

温开水

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JS Excel IE

实现效果：从有两个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>

Excel.rar (17.4 KB)
下载次数: 29

分享到：

JQuery操作文档之包裹节点 | JS在HTML代码中的执行顺序

2014-08-22 17:15
浏览 9069
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论