论坛首页 Web前端技术论坛

javascript实现导出excel(可以导出表格线)

浏览 46731 次
精华帖 (1) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2008-03-31  

今天无意找到了很久前的js导出excel功能,用了一下感觉不错,在网上看很多人做js导出excel,可是对表格线的导出excel总是头疼,我这里有一个简单的导出js,大家可以看看。
       这只是一个简单demo,首先静态页面

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>综合信息管理系统 行政管理 安全检查  归档信息 列表</title>
<link href="../../resources/css/stlye.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
	margin-top: 10px;
	margin-bottom: 5px;
	margin-left: 5px;
	margin-right: 5px;
}
</style>
<body>
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="30" align="left" class="zibold13">当前位置:行政管理 >> 安全检查 >> <a href="aqGuidang.html">归档信息</a> >> 列表</td>
  </tr>
</table>
<table width="90%" align="center" border="0" cellpadding="0" cellspacing="0" class="neikuangtop">
  <tr>
    <td width="7%" height="30" align="right" class="left_line">时间:</td>
	<td width="15%" align="left"><input name="textfield" type="text" value="2006-09-18" size="15" height="16"></td>
	<td width="3%" align="right">至</td>
    <td width="55%" align="left"><input name="textfield2" type="text" value="2007-09-20" size="15" height="16" /></td>
    <td width="10%" align="right" style="padding-right:10px;"><input type="button" name="Submit" value="查询" onclick="javascript:location.href='#';" /></td>
    <td width="10%" align="left" style="padding-left:10px;"><input type="button" name="Submit3" value="查询统计" onclick="javascript:location.href='aqJiancha_Search.html';" /></td>
  </tr>
</table>
<table id="table1" width="90%" border="0" align="center" cellpadding="0" cellspacing="0" class="waikuang">
  <tr>
    <td width="6%" height="27" align="center" class="neikuangbold">序号</td>
	<td width="10%" align="center" class="neikuangbold">时间</td>
    <td width="20%" align="center" class="neikuangbold">单位</td>
    <td width="18%" align="center" class="neikuangbold">项目</td>
    <td width="10%" align="center" class="neikuangbold">结果等级</td>
    <td width="10%" align="center" class="neikuangbold">检查机关</td>
    <td width="8%" align="center" class="neikuangbold">记录人</td>
    <td width="12%" align="center" class="neikuangbold">记录时间</td>
    <td width="6%" align="center" class="neikuangbold">查看</td>
  </tr>
  <tr>
    <td height="21" align="center" class="neikuang">1</td>
	<td align="center" class="neikuang">1980-02-02</td>
    <td align="center" class="neikuang">武警总队</td>
    <td align="center" class="neikuang">安全用电检查</td>
    <td align="center" class="neikuang">2222222</td>
    <td align="center" class="neikuang">总部</td>
    <td align="center" class="neikuang">主席</td>
    <td align="center" class="neikuang">1980-02-02</td>
    <td align="center" class="neikuang"><a href="aqChakanShow.html">查看</a></td>
  </tr>
  <tr>
    <td height="21" align="center" class="neikuang">2</td>
	<td align="center" class="neikuang">1980-02-02</td>
    <td align="center" class="neikuang">武警总队</td>
    <td align="center" class="neikuang">安全用电检查</td>
    <td align="center" class="neikuang">2222222</td>
    <td align="center" class="neikuang">总部</td>
    <td align="center" class="neikuang">总理</td>
    <td align="center" class="neikuang">1980-02-02</td>
    <td align="center" class="neikuang"><a href="aqChakanShow.html">查看</a></td>
  </tr>
  </table>
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="25" align="right">首页 | 上一页 | 下一页 | 尾页</td>
  </tr>
</table>
<table width="90%" align="center" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50%" height="30" align="right" valign="bottom" style="padding-right:10px;"><input type="submit" name="Submit2" onclick="preview()" value="打印当前页" class="waikuang" ></td>
	<td width="50%" align="left" valign="bottom" style="padding-left:10px;"><input type="submit" name="Submit22" value="打印所有页"></td>
  </tr>
</table>
</body>

</html>

  

下面,调用js

<script language=javascript>
function preview() { 
window.clipboardData.setData("Text",document.all('table1').outerHTML);
try
{
var ExApp = new ActiveXObject("Excel.Application")
var ExWBk = ExApp.workbooks.add()
var ExWSh = ExWBk.worksheets(1)
ExApp.DisplayAlerts = false
ExApp.visible = true
}  
catch(e)
{
alert("您的电脑没有安装Microsoft Excel软件!")
return false
} 
 ExWBk.worksheets(1).Paste;	
 }
</script>

 

很简单,有兴趣的朋友可以试试。

这个js是根据table的id进行导出的,这样有个缺点:会将最后一列的“查看”进行导出excel输出。解决方法,在此页面再输出一个隐藏的table并给他标示,这个隐藏table只有数据,这样点击导出,只导出数据。方法繁重,希望有别的解决方法,如果有请指教。

 

   发表时间:2008-05-28  
但这个是基于降低安全性的操作的!!

所以如果是基于内网应用的话还是不错的!!!

并且还得安装Ofiice!
0 请登录后投票
   发表时间:2008-05-30  
谢谢您的指教
0 请登录后投票
   发表时间:2008-09-08  
貌似你这个script会执行,为什么我浏览这个页面提示有js执行速度变慢,难道Robbin没有屏蔽js?
0 请登录后投票
   发表时间:2008-09-09  
一般用服务器端生成个table,加个http header就能实现excel了。。。
0 请登录后投票
   发表时间:2008-09-10  
lendo.du 写道
貌似你这个script会执行,为什么我浏览这个页面提示有js执行速度变慢,难道Robbin没有屏蔽js?

晕,确实IE提示脚本运行慢,bug?
1 请登录后投票
   发表时间:2008-11-21  
这个其实没什么用了,不能控制列宽,还得在excel里面手动去拉,用户体验不好
0 请登录后投票
   发表时间:2008-11-21  
js导出excel看不出有啥需要的地方,在慢的客户端你都可以看到它一行行的填充,看着都难受。况且一般都是分页的,前段数据也不多,也导不全吧。jxl模板导出,要啥格式就有啥格式。
0 请登录后投票
   发表时间:2008-12-24  
用Spring的导出Excel方法吧
0 请登录后投票
   发表时间:2009-01-17  
ActiveXObject在firefox下是没法用的,现在网上基本上都是基于IE的,能不能写一个适合所有浏览器的导出程序?
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics