读取Excel中的数据显示到页面（IE，火狐）

最新推荐文章于 2022-05-16 23:25:42 发布

wjiaoling136

最新推荐文章于 2022-05-16 23:25:42 发布

阅读量1k

点赞数

分类专栏： JXL 文章标签： JXL 读取Excel文件

本文链接：https://blog.csdn.net/wjiaoling136/article/details/84709757

版权

前面有写一篇叫做“JS获取Excel数据并显示到页面（IE）”的博客，主要讲IE环境下获取Excel数据进行显示。最近研究了下JXL，想着用JXL读取Excel数据显示到页面上，就综合了上篇弄了个综合的。

实现的功能还是从Excel中读取数据显示到页面上，不同的是添加了对其他浏览器的支持。IE当中使用ActiveXObject导数据是毋庸置疑的，火狐里面则使用JXL读取Excel数据拼接HTML显示到页面上。需要说明的是：火狐处于安全性考虑，不能获取到“浏览”文件的物理路径，也就不能通过指定文件路径来读取相应的文档。因此这里的处理方式是先上传到服务器，然后从服务器读取Excel数据。闲话说到这，上代码。

1、页面布局（与上一篇文档的布局差不多，不同的是加了个form表单）：

<body>
 <form action="<%=path%>/ReadExcelServlet" method="post" id="fileForm" enctype="multipart/form-data">
 <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" οnchange="ReadExcel();" id="upfile" name="uploadFile"/> <!--真正的浏览按钮，用来打开上传页面，前面的“浏览”按钮掩盖此按钮，为好看-->
</div>
</form>
<br />
<div id="show"></div>
</body>

2、基本样式（也与上一篇文档差不多，就加了个tabFirstTr类）：

<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; }
.tabFirstTr{background:#ededed;font-weight: bold;}
</style>

3、用到的JS：

<script type="text/javascript">
 //点击“浏览”按钮时出发该事件
 function ReadExcel(){
	  if(!+"\v1"){//IE不支持垂直制表符
		  ReadExcelForIE();//调用IE的方法
		  return ;
	  }else{//说明是其他系列，那么调用JXL读取Excel并显示到页面
		  ReadExcelForOthers();
		  return; 
	 }
 } 
 
 //IE系列：使用IE的ActiveXObject读取Excel数据并显示到页面上
 function ReadExcelForIE() {
	   //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 ;}//若为空，不处理
	   //判断当前上传的文件是不是Excel文件
	   var isDecimal=/^.*\.(?:xls|xlsx)$/;
		if(!(isDecimal.test(file_upl.value))){
	    	alert("只支持xlsx、xls类型的Excel文件");
	    	document.getElementById("textfield").value="";//文本框值置空
	    	return false;
		}
	   
	try {  
      	        var oXL = new ActiveXObject("Excel.Application"); //创建操作EXCEL应用程序的实例 
     	}catch(e) {  
      		alert( "要将该表导出到Excel&#

最低0.47元/天解锁文章

wjiaoling136

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
读取Excel中的数据显示到页面（IE，火狐）

前面有写一篇叫做“JS获取Excel数据并显示到页面（IE）”的博客，主要讲IE环境下获取Excel数据进行显示。最近研究了下JXL，想着用JXL读取Excel数据显示到页面上，就综合了上篇弄了个综合的。实现的功能还是从Excel中读取数据显示到页面上，不同的是添加了对其他浏览器的支持。IE当中使用ActiveXObject导数据是毋庸置疑的，火狐里面则使用JXL读取Excel数据拼...
复制链接

扫一扫