今天做了一个在web页面对table生成csv文件,csv可以直接用excel打开,于是就变成了,把web页面的table转成excel。
页面数据用js导出excel,在IE可以用new 一个ActiveXObject("Excel.Application" )对象来处理,但是需要IE启动activeX,不然运行不了,而且只能在IE里才能运行,不能兼容其他浏览器。所以要在web前端把table生成excel,可以把table的数据生成csv。如果是要做成复杂的excel,可以用java的POI开源组件处理。
所采用的技术是:js的组件table2CSV+jsp
数据展示页面index.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="<%=basePath%>js/table2CSV.js"></script>
<script type="text/javascript">
function getCSVData(){
//tablesorter就是要导出的table
var csv_value=$('#tablesorter').table2CSV({delivery:'value'});
$("#csv_text").val(csv_value);
}
</script>
</head>
<body>
<form action="tool-excel.jsp" method ="post" >
<input type="hidden" name="csv_text" id="csv_text">
<input type="submit" value="下载" οnclick="getCSVData()">
</form>
<table id="tablesorter" class="tablesorter">
<thead>
<tr>
<th align="center">时间</th>
<th align="center">数据</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">2012-05-07</td>
<td align="center">1204089</td>
</tr>
<tr>
<td align="center">2012-05-06</td>
<td align="center">1230075</td>
</tr>
<tr>
<td align="center">2012-05-05</td>
<td align="center">1227217</td>
</tr>
<tr>
<td align="center">2012-05-04</td>
<td align="center">1263048</td>
</tr>
<tr>
<td align="center">2012-05-03</td>
<td align="center">1303148</td>
</tr>
<tr>
<td align="center">2012-05-02</td>
<td align="center">1343278</td>
</tr>
<tr>
<td align="center">2012-05-01</td>
<td align="center">1326007</td>
</tr>
</tbody>
</table>
</body>
</html>
在这个页面里,他会把数据封装成csv格式的数据,传递到tool-excel.jsp里,在tool-excel.jsp进行处理
tool-excel.jsp代码
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
response.setHeader("Content-type","application/octet-stream");
response.setHeader("Content-Disposition","p_w_upload; filename=\"my-data.csv\"");//生成的csv名为my-data.csv
String data = request.getParameter("csv_text");
out.println(data);//把数据写入到浏览器,以下载的方式
%>
转载于:https://blog.51cto.com/chenzhixi/857741