今天做了一个在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="下载" onclick="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);//把数据写入到浏览器,以下载的方式

%>