JavaScript-javascript导出excel的方法 (兼容IE和Firefox)

UI设计界面 UI设计界面 主题:1059 回复:2190

JavaScript-javascript导出excel的方法 (兼容IE和Firefox)

虐人心 发布于 2017-04-03 字数 79 浏览 956 回复 6

将页面的TABLE内容直接通过JS导出excel下载到本地,知道的同学帮忙解答一下。

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(6

灵芸 2017-09-09 6 楼

说一个思路,
javascript DOM 层获取响应的数据,AJAX 传递到后台,通过PHP 导出 xls 或者CSV 那都是很简单的事情

网上找的一个代码, 测试 只能IE 用,

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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>

<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>

偏爱自由 2017-09-07 5 楼

好像是不行,除非写activeX。
我通常都是通过后台(java的poi等等)生成,前台下载

偏爱自由 2017-07-28 4 楼

我记得ExtJS里的表格是可以导出Excel的,你可以去看一下那个JS

想挽留 2017-07-03 3 楼

可以,这个js我写过,经过测试可用,说下思路:
其实就是把table这个element整个取到,然后转化为html语句,然后把这个语句写入csv文件中去。
优点:省事省力,不用程序在写jxl或者poi之类的东西了
但是缺点也很明显,因为是整个的html,所以导出文件并不是按照csv格式输出的,打开是能够看的,但是没有了“单元格”的概念,排序什么的不能实现了。
更好的办法,就是去解析html文件,然后第一行的td作为exlce的头,其他的作为下面的内容写入,就可以了。

付下最简单实现的代码(就是有缺点的那个方法)
createExcel = function(id) {

var html = $("#" + id).html();
var xlsWindow=window.open("","_blank","width=1,height=1,scrollable=no,toolbar=no");

/*
xlsWindow.document.write("<%");
xlsWindow.document.write("response.setHeader("Content-Type", "application/force-download;");");
xlsWindow.document.write("response.setHeader("Content-disposition","attachment;filename=11.xls");");
xlsWindow.document.write("out.print(" + html + ");");
xlsWindow.document.write("out.flush();");
xlsWindow.document.write("%>");
/

if(xlsWindow!=null){
    xlsWindow.document.write(html);
    xlsWindow.document.close();
    xlsWindow.focus();
    xlsWindow.document.execCommand('saveAs', true, new Date().getTime()+'.csv');
}
xlsWindow.focus();
xlsWindow.close();

}

清晨说ぺ晚安 2017-05-28 2 楼

用jquery就可以实现不用考虑浏览器的限制,主要代码:

$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "/swf/copy_cvs_xls_pdf.swf"
}
} );
} );

具体例子:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<!--

Created using /
Source can be edited via /untitled/edit

-->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

&lt;title&gt;DataTables live example&lt;/title&gt;
&lt;style type="text/css"&gt;
  @import "/media/css/demo_page.css";
  @import "/media/css/demo_table.css";
&lt;/style&gt;
&lt;script type="text/javascript" language="javascript" src="/media/js/jquery.js"&gt;&lt;/script&gt;
&lt;script class="jsbin" src="http://datatables.net/download/build/jquery.dataTables.nightly.js"&gt;&lt;/script&gt;

</head>
<body id="dt_example">
<div id="container">
<h1>Live example</h1>

  &lt;table cellpadding="0" cellspacing="0" border="0" class="display" id="example"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Rendering engine&lt;/th&gt;
        &lt;th&gt;Browser&lt;/th&gt;
        &lt;th&gt;Platform(s)&lt;/th&gt;
        &lt;th&gt;Engine version&lt;/th&gt;
        &lt;th&gt;CSS grade&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr class="odd gradeX"&gt;
        &lt;td&gt;Trident&lt;/td&gt;
        &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
        &lt;td&gt;Win 95+&lt;/td&gt;
        &lt;td class="center"&gt; 4&lt;/td&gt;
        &lt;td class="center"&gt;X&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="even gradeC"&gt;
        &lt;td&gt;Trident&lt;/td&gt;
        &lt;td&gt;Internet Explorer 5.0&lt;/td&gt;
        &lt;td&gt;Win 95+&lt;/td&gt;
        &lt;td class="center"&gt;5&lt;/td&gt;
        &lt;td class="center"&gt;C&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="odd gradeA"&gt;
        &lt;td&gt;Trident&lt;/td&gt;
        &lt;td&gt;Internet Explorer 5.5&lt;/td&gt;
        &lt;td&gt;Win 95+&lt;/td&gt;
        &lt;td class="center"&gt;5.5&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="even gradeA"&gt;
        &lt;td&gt;Trident&lt;/td&gt;
        &lt;td&gt;Internet Explorer 6&lt;/td&gt;
        &lt;td&gt;Win 98+&lt;/td&gt;
        &lt;td class="center"&gt;6&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="odd gradeA"&gt;
        &lt;td&gt;Trident&lt;/td&gt;
        &lt;td&gt;Internet Explorer 7&lt;/td&gt;
        &lt;td&gt;Win XP SP2+&lt;/td&gt;
        &lt;td class="center"&gt;7&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="even gradeA"&gt;
        &lt;td&gt;Trident&lt;/td&gt;
        &lt;td&gt;AOL browser (AOL desktop)&lt;/td&gt;
        &lt;td&gt;Win XP&lt;/td&gt;
        &lt;td class="center"&gt;6&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Gecko&lt;/td&gt;
        &lt;td&gt;Firefox 1.0&lt;/td&gt;
        &lt;td&gt;Win 98+ / OSX.2+&lt;/td&gt;
        &lt;td class="center"&gt;1.7&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Gecko&lt;/td&gt;
        &lt;td&gt;Firefox 1.5&lt;/td&gt;
        &lt;td&gt;Win 98+ / OSX.2+&lt;/td&gt;
        &lt;td class="center"&gt;1.8&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Gecko&lt;/td&gt;
        &lt;td&gt;Firefox 2.0&lt;/td&gt;
        &lt;td&gt;Win 98+ / OSX.2+&lt;/td&gt;
        &lt;td class="center"&gt;1.8&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Gecko&lt;/td&gt;
        &lt;td&gt;Firefox 3.0&lt;/td&gt;
        &lt;td&gt;Win 2k+ / OSX.3+&lt;/td&gt;
        &lt;td class="center"&gt;1.9&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Gecko&lt;/td&gt;
        &lt;td&gt;Camino 1.0&lt;/td&gt;
        &lt;td&gt;OSX.2+&lt;/td&gt;
        &lt;td class="center"&gt;1.8&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Gecko&lt;/td&gt;
        &lt;td&gt;Camino 1.5&lt;/td&gt;
        &lt;td&gt;OSX.3+&lt;/td&gt;
        &lt;td class="center"&gt;1.8&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Gecko&lt;/td&gt;
        &lt;td&gt;Netscape 7.2&lt;/td&gt;
        &lt;td&gt;Win 95+ / Mac OS 8.6-9.2&lt;/td&gt;
        &lt;td class="center"&gt;1.7&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Gecko&lt;/td&gt;
        &lt;td&gt;Netscape Browser 8&lt;/td&gt;
        &lt;td&gt;Win 98SE+&lt;/td&gt;
        &lt;td class="center"&gt;1.7&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Gecko&lt;/td&gt;
        &lt;td&gt;Netscape Navigator 9&lt;/td&gt;
        &lt;td&gt;Win 98+ / OSX.2+&lt;/td&gt;
        &lt;td class="center"&gt;1.8&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Gecko&lt;/td&gt;
        &lt;td&gt;Mozilla 1.0&lt;/td&gt;
        &lt;td&gt;Win 95+ / OSX.1+&lt;/td&gt;
        &lt;td class="center"&gt;1&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Gecko&lt;/td&gt;
        &lt;td&gt;Mozilla 1.1&lt;/td&gt;
        &lt;td&gt;Win 95+ / OSX.1+&lt;/td&gt;
        &lt;td class="center"&gt;1.1&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Gecko&lt;/td&gt;
        &lt;td&gt;Mozilla 1.2&lt;/td&gt;
        &lt;td&gt;Win 95+ / OSX.1+&lt;/td&gt;
        &lt;td class="center"&gt;1.2&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Gecko&lt;/td&gt;
        &lt;td&gt;Mozilla 1.3&lt;/td&gt;
        &lt;td&gt;Win 95+ / OSX.1+&lt;/td&gt;
        &lt;td class="center"&gt;1.3&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Gecko&lt;/td&gt;
        &lt;td&gt;Mozilla 1.4&lt;/td&gt;
        &lt;td&gt;Win 95+ / OSX.1+&lt;/td&gt;
        &lt;td class="center"&gt;1.4&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Gecko&lt;/td&gt;
        &lt;td&gt;Mozilla 1.5&lt;/td&gt;
        &lt;td&gt;Win 95+ / OSX.1+&lt;/td&gt;
        &lt;td class="center"&gt;1.5&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Gecko&lt;/td&gt;
        &lt;td&gt;Mozilla 1.6&lt;/td&gt;
        &lt;td&gt;Win 95+ / OSX.1+&lt;/td&gt;
        &lt;td class="center"&gt;1.6&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Gecko&lt;/td&gt;
        &lt;td&gt;Mozilla 1.7&lt;/td&gt;
        &lt;td&gt;Win 98+ / OSX.1+&lt;/td&gt;
        &lt;td class="center"&gt;1.7&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Gecko&lt;/td&gt;
        &lt;td&gt;Mozilla 1.8&lt;/td&gt;
        &lt;td&gt;Win 98+ / OSX.1+&lt;/td&gt;
        &lt;td class="center"&gt;1.8&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Gecko&lt;/td&gt;
        &lt;td&gt;Seamonkey 1.1&lt;/td&gt;
        &lt;td&gt;Win 98+ / OSX.2+&lt;/td&gt;
        &lt;td class="center"&gt;1.8&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Gecko&lt;/td&gt;
        &lt;td&gt;Epiphany 2.20&lt;/td&gt;
        &lt;td&gt;Gnome&lt;/td&gt;
        &lt;td class="center"&gt;1.8&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Webkit&lt;/td&gt;
        &lt;td&gt;Safari 1.2&lt;/td&gt;
        &lt;td&gt;OSX.3&lt;/td&gt;
        &lt;td class="center"&gt;125.5&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Webkit&lt;/td&gt;
        &lt;td&gt;Safari 1.3&lt;/td&gt;
        &lt;td&gt;OSX.3&lt;/td&gt;
        &lt;td class="center"&gt;312.8&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Webkit&lt;/td&gt;
        &lt;td&gt;Safari 2.0&lt;/td&gt;
        &lt;td&gt;OSX.4+&lt;/td&gt;
        &lt;td class="center"&gt;419.3&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Webkit&lt;/td&gt;
        &lt;td&gt;Safari 3.0&lt;/td&gt;
        &lt;td&gt;OSX.4+&lt;/td&gt;
        &lt;td class="center"&gt;522.1&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Webkit&lt;/td&gt;
        &lt;td&gt;OmniWeb 5.5&lt;/td&gt;
        &lt;td&gt;OSX.4+&lt;/td&gt;
        &lt;td class="center"&gt;420&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Webkit&lt;/td&gt;
        &lt;td&gt;iPod Touch / iPhone&lt;/td&gt;
        &lt;td&gt;iPod&lt;/td&gt;
        &lt;td class="center"&gt;420.1&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Webkit&lt;/td&gt;
        &lt;td&gt;S60&lt;/td&gt;
        &lt;td&gt;S60&lt;/td&gt;
        &lt;td class="center"&gt;413&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Presto&lt;/td&gt;
        &lt;td&gt;Opera 7.0&lt;/td&gt;
        &lt;td&gt;Win 95+ / OSX.1+&lt;/td&gt;
        &lt;td class="center"&gt;-&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Presto&lt;/td&gt;
        &lt;td&gt;Opera 7.5&lt;/td&gt;
        &lt;td&gt;Win 95+ / OSX.2+&lt;/td&gt;
        &lt;td class="center"&gt;-&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Presto&lt;/td&gt;
        &lt;td&gt;Opera 8.0&lt;/td&gt;
        &lt;td&gt;Win 95+ / OSX.2+&lt;/td&gt;
        &lt;td class="center"&gt;-&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Presto&lt;/td&gt;
        &lt;td&gt;Opera 8.5&lt;/td&gt;
        &lt;td&gt;Win 95+ / OSX.2+&lt;/td&gt;
        &lt;td class="center"&gt;-&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Presto&lt;/td&gt;
        &lt;td&gt;Opera 9.0&lt;/td&gt;
        &lt;td&gt;Win 95+ / OSX.3+&lt;/td&gt;
        &lt;td class="center"&gt;-&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Presto&lt;/td&gt;
        &lt;td&gt;Opera 9.2&lt;/td&gt;
        &lt;td&gt;Win 88+ / OSX.3+&lt;/td&gt;
        &lt;td class="center"&gt;-&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Presto&lt;/td&gt;
        &lt;td&gt;Opera 9.5&lt;/td&gt;
        &lt;td&gt;Win 88+ / OSX.3+&lt;/td&gt;
        &lt;td class="center"&gt;-&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Presto&lt;/td&gt;
        &lt;td&gt;Opera for Wii&lt;/td&gt;
        &lt;td&gt;Wii&lt;/td&gt;
        &lt;td class="center"&gt;-&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Presto&lt;/td&gt;
        &lt;td&gt;Nokia N800&lt;/td&gt;
        &lt;td&gt;N800&lt;/td&gt;
        &lt;td class="center"&gt;-&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Presto&lt;/td&gt;
        &lt;td&gt;Nintendo DS browser&lt;/td&gt;
        &lt;td&gt;Nintendo DS&lt;/td&gt;
        &lt;td class="center"&gt;8.5&lt;/td&gt;
        &lt;td class="center"&gt;C/A&lt;sup&gt;1&lt;/sup&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeC"&gt;
        &lt;td&gt;KHTML&lt;/td&gt;
        &lt;td&gt;Konqureror 3.1&lt;/td&gt;
        &lt;td&gt;KDE 3.1&lt;/td&gt;
        &lt;td class="center"&gt;3.1&lt;/td&gt;
        &lt;td class="center"&gt;C&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;KHTML&lt;/td&gt;
        &lt;td&gt;Konqureror 3.3&lt;/td&gt;
        &lt;td&gt;KDE 3.3&lt;/td&gt;
        &lt;td class="center"&gt;3.3&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;KHTML&lt;/td&gt;
        &lt;td&gt;Konqureror 3.5&lt;/td&gt;
        &lt;td&gt;KDE 3.5&lt;/td&gt;
        &lt;td class="center"&gt;3.5&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeX"&gt;
        &lt;td&gt;Tasman&lt;/td&gt;
        &lt;td&gt;Internet Explorer 4.5&lt;/td&gt;
        &lt;td&gt;Mac OS 8-9&lt;/td&gt;
        &lt;td class="center"&gt;-&lt;/td&gt;
        &lt;td class="center"&gt;X&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeC"&gt;
        &lt;td&gt;Tasman&lt;/td&gt;
        &lt;td&gt;Internet Explorer 5.1&lt;/td&gt;
        &lt;td&gt;Mac OS 7.6-9&lt;/td&gt;
        &lt;td class="center"&gt;1&lt;/td&gt;
        &lt;td class="center"&gt;C&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeC"&gt;
        &lt;td&gt;Tasman&lt;/td&gt;
        &lt;td&gt;Internet Explorer 5.2&lt;/td&gt;
        &lt;td&gt;Mac OS 8-X&lt;/td&gt;
        &lt;td class="center"&gt;1&lt;/td&gt;
        &lt;td class="center"&gt;C&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Misc&lt;/td&gt;
        &lt;td&gt;NetFront 3.1&lt;/td&gt;
        &lt;td&gt;Embedded devices&lt;/td&gt;
        &lt;td class="center"&gt;-&lt;/td&gt;
        &lt;td class="center"&gt;C&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeA"&gt;
        &lt;td&gt;Misc&lt;/td&gt;
        &lt;td&gt;NetFront 3.4&lt;/td&gt;
        &lt;td&gt;Embedded devices&lt;/td&gt;
        &lt;td class="center"&gt;-&lt;/td&gt;
        &lt;td class="center"&gt;A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeX"&gt;
        &lt;td&gt;Misc&lt;/td&gt;
        &lt;td&gt;Dillo 0.8&lt;/td&gt;
        &lt;td&gt;Embedded devices&lt;/td&gt;
        &lt;td class="center"&gt;-&lt;/td&gt;
        &lt;td class="center"&gt;X&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeX"&gt;
        &lt;td&gt;Misc&lt;/td&gt;
        &lt;td&gt;Links&lt;/td&gt;
        &lt;td&gt;Text only&lt;/td&gt;
        &lt;td class="center"&gt;-&lt;/td&gt;
        &lt;td class="center"&gt;X&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeX"&gt;
        &lt;td&gt;Misc&lt;/td&gt;
        &lt;td&gt;Lynx&lt;/td&gt;
        &lt;td&gt;Text only&lt;/td&gt;
        &lt;td class="center"&gt;-&lt;/td&gt;
        &lt;td class="center"&gt;X&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeC"&gt;
        &lt;td&gt;Misc&lt;/td&gt;
        &lt;td&gt;IE Mobile&lt;/td&gt;
        &lt;td&gt;Windows Mobile 6&lt;/td&gt;
        &lt;td class="center"&gt;-&lt;/td&gt;
        &lt;td class="center"&gt;C&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeC"&gt;
        &lt;td&gt;Misc&lt;/td&gt;
        &lt;td&gt;PSP browser&lt;/td&gt;
        &lt;td&gt;PSP&lt;/td&gt;
        &lt;td class="center"&gt;-&lt;/td&gt;
        &lt;td class="center"&gt;C&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="gradeU"&gt;
        &lt;td&gt;Other browsers&lt;/td&gt;
        &lt;td&gt;All others&lt;/td&gt;
        &lt;td&gt;-&lt;/td&gt;
        &lt;td class="center"&gt;-&lt;/td&gt;
        &lt;td class="center"&gt;U&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;tfoot&gt;
      &lt;tr&gt;
        &lt;th&gt;Rendering engine&lt;/th&gt;
        &lt;th&gt;Browser&lt;/th&gt;
        &lt;th&gt;Platform(s)&lt;/th&gt;
        &lt;th&gt;Engine version&lt;/th&gt;
        &lt;th&gt;CSS grade&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/tfoot&gt;
  &lt;/table&gt;

&lt;/div&gt;

<script>
/*

  • Example initialisation
    */
    $(document).ready( function () {
    $('#example').dataTable( {
    "sDom": 'T&lt;"clear"&gt;lfrtip',
    "oTableTools": {
    "sSwfPath": "/swf/copy_csv_xls_pdf.swf"
    }
    } );
    } );
    </script>
    </body>
    </html>

参考:
Jquery DataTables Table Tools plugin

想挽留 2017-04-14 1 楼

ExtGrid的导出方式,思路是将grid解析了,输出Excel的xml格式字符串,提交到后台直接生成文件(也可以本地,那个方法忘记了),文件下载下来右键打开是可以看到是XML,这种方法比较少用到,下面这个是我用到的,在原始的那个上面进行了一点调整(原来那个打不开),忘记调整哪里了。问题是Excel的xml规范根本不清楚,全靠猜得,需要去看微软的xml声明,另外复杂的Grid倒不出来或不是原来的样子,数据量大会卡住蛮久的,效率不是很高。不过对于简单的资料管理导出确实很方便。非Ext就自己参考下面的格式吧

 function exportExtToExcel(grid) {
var vExportContent = "";
try {
vExportContent = grid.getExcelXml();
} catch (e) {
alert("对不起,生成Excel内容失败!");
return;
}
//if (Ext.isIE6 || Ext.isIE7 || Ext.isSafari || Ext.isSafari2 || Ext.isSafari3) {
var fd = Ext.get('frmDummy');
if (!fd) {
fd = Ext.DomHelper.append(Ext.getBody(), {tag:'form', method:'post', id:'frmDummy', action:WEB_APPLICATION_CONTEXT + '/servlet/exportExcel', target:'_self', name:'frmDummy',
cls:'x-hidden', cn:[
{tag:'input', name:'exportContent', id:'exportContent', type:'hidden'}
]}, true);
}
fd.child('#exportContent').set({value:vExportContent});
fd.dom.submit();
}

 /**

  • allows for downloading of grid data (store) directly into excel
  • Method: extracts data of gridPanel store, uses columnModel to construct XML excel document,
  • converts to Base64, then loads everything into a data URL link.
  • @author Animal <extjs support team>
  • */

/**

var Base64 = (function() {
// Private property
var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

// Private method for UTF-8 encoding
function utf8Encode(string) {
    string = string.replace(/rn/g,"n");
    var utftext = "";
    for (var n = 0; n &lt; string.length; n++) {
        var c = string.charCodeAt(n);
        if (c &lt; 128) {
            utftext += String.fromCharCode(c);
        }
        else if((c &gt; 127) &amp;&amp; (c &lt; 2048)) {
            utftext += String.fromCharCode((c &gt;&gt; 6) | 192);
            utftext += String.fromCharCode((c &amp; 63) | 128);
        }
        else {
            utftext += String.fromCharCode((c &gt;&gt; 12) | 224);
            utftext += String.fromCharCode(((c &gt;&gt; 6) &amp; 63) | 128);
            utftext += String.fromCharCode((c &amp; 63) | 128);
        }
    }
    return utftext;
}

// Public method for encoding
return {
    encode : (typeof btoa == 'function') ? function(input) {
        return btoa(utf8Encode(input));
    } : function (input) {
        var output = "";
        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
        var i = 0;
        input = utf8Encode(input);
        while (i &lt; input.length) {
            chr1 = input.charCodeAt(i++);
            chr2 = input.charCodeAt(i++);
            chr3 = input.charCodeAt(i++);
            enc1 = chr1 &gt;&gt; 2;
            enc2 = ((chr1 &amp; 3) &lt;&lt; 4) | (chr2 &gt;&gt; 4);
            enc3 = ((chr2 &amp; 15) &lt;&lt; 2) | (chr3 &gt;&gt; 6);
            enc4 = chr3 &amp; 63;
            if (isNaN(chr2)) {
                enc3 = enc4 = 64;
            } else if (isNaN(chr3)) {
                enc4 = 64;
            }
            output = output +
            keyStr.charAt(enc1) + keyStr.charAt(enc2) +
            keyStr.charAt(enc3) + keyStr.charAt(enc4);
        }
        return output;
    }
};

})();

Ext.override(Ext.grid.GridPanel, {
getExcelXml: function(includeHidden) {
var worksheet = this.createWorksheet(includeHidden);
var totalWidth = this.getColumnModel().getTotalWidth(includeHidden);
return '<xml version="1.0" encoding="utf-8">' +
'<ss:Workbook xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:o="urn:schemas-microsoft-com:office:office">' +
'<o:DocumentProperties><o:Title>' + this.title + '</o:Title></o:DocumentProperties>' +
'<ss:ExcelWorkbook>' +
'<ss:WindowHeight>' + worksheet.height + '</ss:WindowHeight>' +
'<ss:WindowWidth>' + worksheet.width + '</ss:WindowWidth>' +
'<ss:ProtectStructure>False</ss:ProtectStructure>' +
'<ss:ProtectWindows>False</ss:ProtectWindows>' +
'</ss:ExcelWorkbook>' +
'<ss:Styles>' +
'<ss:Style ss:ID="Default">' +
'<ss:Alignment ss:Vertical="Top" ss:WrapText="1" />' +
'<ss:Font ss:FontName="arial" ss:Size="10" />' +
'<ss:Borders>' +
'<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Top" />' +
'<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Bottom" />' +
'<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Left" />' +
'<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Right" />' +
'</ss:Borders>' +
'<ss:Interior />' +
'<ss:NumberFormat />' +
'<ss:Protection />' +
'</ss:Style>' +
'<ss:Style ss:ID="title">' +
'<ss:Borders />' +
'<ss:Font />' +
'<ss:Alignment ss:WrapText="1" ss:Vertical="Center" ss:Horizontal="Center" />' +
'<ss:NumberFormat ss:Format="@" />' +
'</ss:Style>' +
'<ss:Style ss:ID="headercell">' +
'<ss:Font ss:Bold="1" ss:Size="10" />' +
'<ss:Alignment ss:WrapText="1" ss:Horizontal="Center" />' +
'<ss:Interior ss:Pattern="Solid" ss:Color="#A3C9F1" />' +
'</ss:Style>' +
'<ss:Style ss:ID="even">' +
'<ss:Interior ss:Pattern="Solid" ss:Color="#CCFFFF" />' +
'</ss:Style>' +
'<ss:Style ss:Parent="even" ss:ID="evendate">' +
'<ss:NumberFormat ss:Format="yyyy-mm-dd" />' +
'</ss:Style>' +
'<ss:Style ss:Parent="even" ss:ID="evenint">' +
'<ss:NumberFormat ss:Format="0" />' +
'</ss:Style>' +
'<ss:Style ss:Parent="even" ss:ID="evenfloat">' +
'<ss:NumberFormat ss:Format="0.00" />' +
'</ss:Style>' +
'<ss:Style ss:ID="odd">' +
'<ss:Interior ss:Pattern="Solid" ss:Color="#CCCCFF" />' +
'</ss:Style>' +
'<ss:Style ss:Parent="odd" ss:ID="odddate">' +
'<ss:NumberFormat ss:Format="yyyy-mm-dd" />' +
'</ss:Style>' +
'<ss:Style ss:Parent="odd" ss:ID="oddint">' +
'<ss:NumberFormat ss:Format="0" />' +
'</ss:Style>' +
'<ss:Style ss:Parent="odd" ss:ID="oddfloat">' +
'<ss:NumberFormat ss:Format="0.00" />' +
'</ss:Style>' +
'</ss:Styles>' +
worksheet.xml +
'</ss:Workbook></xml>';
},

createWorksheet: function(includeHidden) {
    // Calculate cell data types and extra class names which affect formatting
    var cellType = [];
    var cellTypeClass = [];
    var cm = this.getColumnModel();
    var totalWidthInPixels = 0;
    var colXml = '';
    var headerXml = '';
    var visibleColumnCountReduction = 0;
    var colCount = cm.getColumnCount();
    for (var i = 0; i &lt; colCount; i++) {
        if ((cm.getDataIndex(i) != '')
            &amp;&amp; (includeHidden || !cm.isHidden(i))) {
            var w = cm.getColumnWidth(i)
            totalWidthInPixels += w;
            if (cm.getColumnHeader(i) === ""){
                cellType.push("None");
                cellTypeClass.push("");
                ++visibleColumnCountReduction;
            }
            else
            {
                colXml += '&lt;ss:Column ss:AutoFitWidth="1" ss:Width="' + w + '" /&gt;';
                headerXml += '&lt;ss:Cell ss:StyleID="headercell"&gt;' +
                    '&lt;ss:Data ss:Type="String"&gt;' + cm.getColumnHeader(i) + '&lt;/ss:Data&gt;' +
                    '&lt;ss:NamedCell ss:Name="Print_Titles" /&gt;&lt;/ss:Cell&gt;';
                var fld = this.store.recordType.prototype.fields.get(cm.getDataIndex(i));
                switch(fld.type) {
                    case "int":
                        cellType.push("Number");
                        cellTypeClass.push("int");
                        break;
                    case "float":
                        cellType.push("Number");
                        cellTypeClass.push("float");
                        break;
                    case "bool":
                    case "boolean":
                        cellType.push("String");
                        cellTypeClass.push("");
                        break;
                    case "date":
                        cellType.push("DateTime");
                        cellTypeClass.push("date");
                        break;
                    default:
                        cellType.push("String");
                        cellTypeClass.push("");
                        break;
                }
            }
        }
    }
    var visibleColumnCount = cellType.length - visibleColumnCountReduction;

    var result = {
        height: 9000,
        width: Math.floor(totalWidthInPixels * 30) + 50
    };

    // Generate worksheet header details.
    var t = '&lt;ss:Worksheet ss:Name="' + this.title + '"&gt;' +
        '&lt;ss:Names&gt;' +
        '&lt;ss:NamedRange ss:Name="Print_Titles" ss:RefersTo="='' + this.title + ''!R1:R2" /&gt;' +
        '&lt;/ss:Names&gt;' +
        '&lt;ss:Table x:FullRows="1" x:FullColumns="1"' +
        ' ss:ExpandedColumnCount="' + (visibleColumnCount + 2) +
        '" ss:ExpandedRowCount="' + (this.store.getCount() + 2) + '"&gt;' +
        colXml +
        '&lt;ss:Row ss:Height="38"&gt;' +
        '&lt;ss:Cell ss:StyleID="title" ss:MergeAcross="' + (visibleColumnCount - 1) + '"&gt;' +
        '&lt;ss:Data xmlns:html="http://www.w3.org/TR/REC-html40" ss:Type="String"&gt;' +
        '&lt;html:B&gt;'+this.title+'&lt;/html:B&gt;&lt;/ss:Data&gt;&lt;ss:NamedCell ss:Name="Print_Titles" /&gt;' +
        '&lt;/ss:Cell&gt;' +
        '&lt;/ss:Row&gt;' +
        '&lt;ss:Row ss:AutoFitHeight="1"&gt;' +
        headerXml +
        '&lt;/ss:Row&gt;';

    // Generate the data rows from the data in the Store
    for (var i = 0, it = this.store.data.items, l = it.length; i &lt; l; i++) {
        t += '&lt;ss:Row&gt;';
        var cellClass = (i &amp; 1) ? 'odd' : 'even';
        var r = it[i].data;
        var k = 0;
        for (var j = 0; j &lt; colCount; j++) {
            if ((cm.getDataIndex(j) != '') &amp;&amp; (includeHidden || !cm.isHidden(j))) {
                var v = r[cm.getDataIndex(j)];
                v = cm.getRenderer(j)(v,cm,it[i],i,j,this.store);
                if (cellType[k] !== "None") {
                    t += '&lt;ss:Cell ss:StyleID="' + cellClass + cellTypeClass[k] + '"&gt;&lt;ss:Data ss:Type="' + cellType[k] + '"&gt;';
                    if (cellType[k] == 'DateTime') {
                        t += v.format('Y-m-d');
                    } else {
                        t += v;
                    }
                    t +='&lt;/ss:Data&gt;&lt;/ss:Cell&gt;';
                }
                k++;
            }
        }
        t += '&lt;/ss:Row&gt;';
    }

    result.xml = t + '&lt;/ss:Table&gt;' +
        '&lt;x:WorksheetOptions&gt;' +
        '&lt;x:PageSetup&gt;' +
        '&lt;x:Layout x:CenterHorizontal="1" x:Orientation="Landscape" /&gt;' +
        '&lt;x:Footer x:Data="Page &amp;amp;P of &amp;amp;N" x:Margin="0.5" /&gt;' +
        '&lt;x:PageMargins x:Top="0.5" x:Right="0.5" x:Left="0.5" x:Bottom="0.8" /&gt;' +
        '&lt;/x:PageSetup&gt;' +
        '&lt;x:FitToPage /&gt;' +
        '&lt;x:Print&gt;' +
        '&lt;x:PrintErrors&gt;Blank&lt;/x:PrintErrors&gt;' +
        '&lt;x:FitWidth&gt;1&lt;/x:FitWidth&gt;' +
        '&lt;x:FitHeight&gt;32767&lt;/x:FitHeight&gt;' +
        '&lt;x:ValidPrinterInfo /&gt;' +
        '&lt;x:VerticalResolution&gt;600&lt;/x:VerticalResolution&gt;' +
        '&lt;/x:Print&gt;' +
        '&lt;x:Selected /&gt;' +
        '&lt;x:DoNotDisplayGridlines /&gt;' +
        '&lt;x:ProtectObjects&gt;False&lt;/x:ProtectObjects&gt;' +
        '&lt;x:ProtectScenarios&gt;False&lt;/x:ProtectScenarios&gt;' +
        '&lt;/x:WorksheetOptions&gt;' +
        '&lt;/ss:Worksheet&gt;';
    return result;
}

});