js导出jsp页面中的表格

最新推荐文章于 2024-03-01 09:38:37 发布

cornyjy

最新推荐文章于 2024-03-01 09:38:37 发布

阅读量968

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/yuj9006/article/details/18035719

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

最近在做一个应用，要将结果导出为excel,但是用于使在云平台上做的，原来想的是在后台生成excel然后下载下来，可是在百度云平台上不能动态的创建文件，所以只能用js将jsp页面的结果导出来。

但是还有点缺点：

1.只能在IE浏览器上使用

2.现在还不支持excel2013.

下面是jsp页面的代码：一个简答的结果页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>导出</title>
<!-- 引入导出excel的js -->
<script type="text/javascript" src="../style/js/exportExcel.js"></script>
</head>
<body>
	<input type="button" value="导出" onClick="saveAsExcel('result')" />
	<table width="1400px" cellspacing="0" border="1" id="result">
		
		<tr align="center" height="30px">
			
			<th rowspan="2" width="40px">分组</th>
			<th colspan="8">基本信息</th>
			<th colspan="4">第一轮</th>
			<th colspan="4">第二轮</th>
			<th colspan="4">第三轮</th>
			<th colspan="4">第四轮</th>
			<th colspan="4">第五轮</th>
			<th rowspan="2">总收益</th>
		</tr>
		
		<tr align="center" height="30px">
		
			<td width="40px" >编号</td>
			<td width="70px" >题型</td>
			<td width="40px" >学号</td>
			<td width="40px" >类型</td>
			<td width="40px" >性别</td>
			<td width="40px" >姓名</td>
			<td width="50px" >左邻局</td>
			<td width="50px" >由邻居</td>
			
			<td>合作方式</td>
			<td>左邻居策略</td>
			<td>右邻居策略</td>
		     <th>收益</th>
			
			<td>合作方式</td>
			<td>左邻居策略</td>
			<td>右邻居策略</td>
		     <th>收益</th>
		     
		     <td>合作方式</td>
			<td>左邻居策略</td>
			<td>右邻居策略</td>
		     <th>收益</th>
		     
		     <td>合作方式</td>
			<td>左邻居策略</td>
			<td>右邻居策略</td>
		     <th>收益</th>
		     
		    <td>合作方式</td>
			<td>左邻居策略</td>
			<td>右邻居策略</td>
		     <th>收益</th>
			

		</tr>
		
		
		<c:forEach items="${viewList }" var="mainView" varStatus="mainStatus">
		
		<c:forEach items="${mainView}" var="view" varStatus="status">
			<tr align="center" height="28px">
				
				<td>第<c:out value="${mainStatus.count}" />组</td>
				
				<td><c:out value="${status.count}" /></td>
				<td>邻居博弈</td>
				<td>${view.xuehao}</td>
				<td>${view.type}</td>
				<td>${view.sex}</td>
				<td>${view.name}</td>
				<td>${view.leftNeighborName}</td>
				<td>${view.rightNeighborName}</td>
				
				<td>
					  <c:if test="${view.number1==0 }">A</c:if>
					  <c:if test="${view.number1==1 }">B</c:if>
				</td>
				<td>
					  <c:if test="${view.leftNumber1==0 }">A</c:if>
					  <c:if test="${view.leftNumber1==1 }">B</c:if>
				</td>
				<td>
					 <c:if test="${view.rightNumber1==0 }">A</c:if>
					 <c:if test="${view.rightNumber1==1 }">B</c:if>
				</td>
			   <td>${view.incomeMoney1}</td>
				
				<td>
					  <c:if test="${view.number2==0 }">A</c:if>
					  <c:if test="${view.number2==1 }">B</c:if>
				</td>
				<td>
					  <c:if test="${view.leftNumber2==0 }">A</c:if>
					  <c:if test="${view.leftNumber2==1 }">B</c:if>
				</td>
				<td>
					 <c:if test="${view.rightNumber2==0 }">A</c:if>
					 <c:if test="${view.rightNumber2==1 }">B</c:if>
				</td>
			    <td>${view.incomeMoney2}</td>
				
				<td>
					  <c:if test="${view.number3==0 }">A</c:if>
					  <c:if test="${view.number3==1 }">B</c:if>
				</td>
				<td>
					  <c:if test="${view.leftNumber3==0 }">A</c:if>
					  <c:if test="${view.leftNumber3==1 }">B</c:if>
				</td>
				<td>
					 <c:if test="${view.rightNumber3==0 }">A</c:if>
					 <c:if test="${view.rightNumber3==1 }">B</c:if>
				</td>
			    <td>${view.incomeMoney3}</td>
				
				<td>
					  <c:if test="${view.number4==0 }">A</c:if>
					  <c:if test="${view.number4==1 }">B</c:if>
				</td>
				<td>
					  <c:if test="${view.leftNumber4==0 }">A</c:if>
					  <c:if test="${view.leftNumber4==1 }">B</c:if>
				</td>
				<td>
					 <c:if test="${view.rightNumber4==0 }">A</c:if>
					 <c:if test="${view.rightNumber4==1 }">B</c:if>
				</td>
			    <td>${view.incomeMoney4}</td>
			    
			    <td>
					  <c:if test="${view.number5==0 }">A</c:if>
					  <c:if test="${view.number5==1 }">B</c:if>
				</td>
				<td>
					  <c:if test="${view.leftNumber5==0 }">A</c:if>
					  <c:if test="${view.leftNumber5==1 }">B</c:if>
				</td>
				<td>
					 <c:if test="${view.rightNumber5==0 }">A</c:if>
					 <c:if test="${view.rightNumber5==1 }">B</c:if>
				</td>
			    <td>${view.incomeMoney5}</td>
			    
				<td>${view.total}</td>
			</tr>
			</c:forEach>
		</c:forEach>
	</table>
</body>
</html>

<script type="text/javascript" src="../style/js/exportExcel.js"></script>中的exportExcel.js的代码如下：

/* * 默认转换实现函数，如果需要其他功能，需自行扩展
 * 参数：
 * tableID : HTML中Table对象id属性值
 * 详细用法参见以下 TableToExcel 对象定义 
 */
 function saveAsExcel(tableID){
  var tb = new TableToExcel(tableID);
  tb.setFontStyle("Courier New");
  tb.setFontSize(10);
  tb.setTableBorder(2);
  tb.setColumnWidth(7);
  tb.isLineWrap(true);
  tb.getExcelFile();
 } 
 /** 功能：HTML中Table对象转换为Excel通用对象.
  * 参数：tableID HTML中Table对象的ID属性值
  * 说明：
  * 能适应复杂的HTML中Table对象的自动转换，能够自动根据行列扩展信息
  * 合并Excel中的单元格，客户端需要安装有Excel
  * 详细的属性、方法引用说明参见：Excel的Microsoft Excel Visual Basic参考
  * 示范：
  * var tb = new TableToExcel('demoTable');
  * tb.setFontStyle("Courier New");
  * tb.setFontSize(10); //推荐取值10
  * tb.setFontColor(6); //一般情况不用设置
  * tb.setBackGround(4); //一般情况不用设置
  * tb.setTableBorder(2); //推荐取值2
  * tb.setColumnWidth(10); //推荐取值10
  * tb.isLineWrap(false);
  * tb.isAutoFit(true);
  * * tb.getExcelFile();
  * 如果设置了单元格自适应，则设置单元格宽度无效
  * 版本：1.0*/
  function TableToExcel(tableID) {
   this.tableBorder = -1; //边框类型，-1没有边框 可取1/2/3/4
   this.backGround = 0; //背景颜色：白色 可取调色板中的颜色编号 1/2/3/4....
   this.fontColor = 1; //字体颜色：黑色
   this.fontSize = 10; //字体大小
   this.fontStyle = "宋体"; //字体类型
   this.rowHeight = 20; //行高
   this.columnWidth = -1; //列宽
   this.lineWrap = true; //是否自动换行
   this.textAlign = -4108; //内容对齐方式 默认为居中
   this.autoFit = true; //是否自适应宽度
   this.tableID = tableID; 
  }
   TableToExcel.prototype.setTableBorder = function (excelBorder) {
    this.tableBorder = excelBorder ;
   }; 
   TableToExcel.prototype.setBackGround = function (excelColor) {
    this.backGround = excelColor;
   }; 
   TableToExcel.prototype.setFontColor = function (excelColor) {
    this.fontColor = excelColor;
   }; 
   TableToExcel.prototype.setFontSize = function (excelFontSize) {
    this.fontSize = excelFontSize;
   }; 
   TableToExcel.prototype.setFontStyle = function (excelFont) {
    this.fontStyle = excelFont;
   }; 
   TableToExcel.prototype.setRowHeight = function (excelRowHeight) {
    this.rowHeight = excelRowHeight;
   }; 
   TableToExcel.prototype.setColumnWidth = function (excelColumnWidth) {
    this.columnWidth = excelColumnWidth;
   }; 
   TableToExcel.prototype.isLineWrap = function (lineWrap) {
    if (lineWrap == false || lineWrap == true) {
     this.lineWrap = lineWrap;
    }
   }; 
   TableToExcel.prototype.setTextAlign = function (textAlign) {
    this.textAlign = textAlign;
   }; 
   TableToExcel.prototype.isAutoFit = function(autoFit){
    if(autoFit == true || autoFit == false)this.autoFit = autoFit ;
   };
   //文件转换主函数
   TableToExcel.prototype.getExcelFile = function () {
   var jXls, myWorkbook, myWorksheet, myHTMLTableCell, myExcelCell, myExcelCell2;
   var myCellColSpan, myCellRowSpan; 
   try {
    jXls = new ActiveXObject('Excel.Application');
   }catch (e) {
    alert("无法启动Excel!\n\n如果您确信您的电脑中已经安装了Excel，"+"那么请调整IE的安全级别。\n\n具体操作：\n\n"+"工具 → Internet选项 → 安全 → 自定义级别 → 对没有标记为安全的ActiveX进行初始化和脚本运行 → 启用");
    return false;
   } 
   jXls.Visible = true;
   myWorkbook = jXls.Workbooks.Add();
   jXls.DisplayAlerts = false;
   myWorkbook.Worksheets(3).Delete();
   myWorkbook.Worksheets(2).Delete();
   jXls.DisplayAlerts = true;
   myWorksheet = myWorkbook.ActiveSheet; 
   var readRow = 0, readCol = 0;var totalRow = 0, totalCol = 0;
   var tabNum = 0; 
   //设置行高、列宽
   if(this.columnWidth != -1)
    myWorksheet.Columns.ColumnWidth = this.columnWidth;
   else
    myWorksheet.Columns.ColumnWidth = 7;
   if(this.rowHeight != -1)
    myWorksheet.Rows.RowHeight = this.rowHeight ; 
   //搜索需要转换的Table对象，获取对应行、列数
   var obj = document.all.tags("table");
   for (x = 0; x < obj.length; x++) {
    if (obj[x].id == this.tableID) {
     tabNum = x;
     totalRow = obj[x].rows.length;
     for (i = 0; i < obj[x].rows[0].cells.length; i++) {
      myHTMLTableCell = obj[x].rows(0).cells(i);
      myCellColSpan = myHTMLTableCell.colSpan;
      totalCol = totalCol + myCellColSpan;
     }
    }
   } 
   //开始构件模拟表格
   var excelTable = new Array();
   for (i = 0; i <= totalRow; i++) {
    excelTable[i] = new Array();
    for (t = 0; t <= totalCol; t++) {
     excelTable[i][t] = false;
    }
   } 
   //开始转换表格 
   for (z = 0; z < obj[tabNum].rows.length; z++) {
    readRow = z + 1;
    readCol = 0;
    for (c = 0; c < obj[tabNum].rows(z).cells.length; c++) {
     myHTMLTableCell = obj[tabNum].rows(z).cells(c);
     myCellColSpan = myHTMLTableCell.colSpan;
     myCellRowSpan = myHTMLTableCell.rowSpan;
     for (y = 1; y <= totalCol; y++) {
      if (excelTable[readRow][y] == false) {
       readCol = y;
       break;
      }
     }
     if (myCellColSpan * myCellRowSpan > 1) {
      myExcelCell = myWorksheet.Cells(readRow, readCol);
      myExcelCell2 = myWorksheet.Cells(readRow + myCellRowSpan - 1, readCol + myCellColSpan - 1);
      myWorksheet.Range(myExcelCell, myExcelCell2).Merge();
      myExcelCell.HorizontalAlignment = this.textAlign;
      myExcelCell.Font.Size = this.fontSize;
      myExcelCell.Font.Name = this.fontStyle;
      myExcelCell.wrapText = this.lineWrap;
      myExcelCell.Interior.ColorIndex = this.backGround;
      myExcelCell.Font.ColorIndex = this.fontColor;
      if(this.tableBorder != -1){
       myWorksheet.Range(myExcelCell, myExcelCell2).Borders(1).Weight = this.tableBorder ;
       myWorksheet.Range(myExcelCell, myExcelCell2).Borders(2).Weight = this.tableBorder ;
       myWorksheet.Range(myExcelCell, myExcelCell2).Borders(3).Weight = this.tableBorder ;
       myWorksheet.Range(myExcelCell, myExcelCell2).Borders(4).Weight = this.tableBorder ;
      } 
      myExcelCell.Value = myHTMLTableCell.innerText;
      for (row = readRow; row <= myCellRowSpan + readRow - 1; row++) {
       for (col = readCol; col <= myCellColSpan + readCol - 1; col++) {
        excelTable[row][col] = true;
       }
      } 
      readCol = readCol + myCellColSpan;
     } else {
      myExcelCell = myWorksheet.Cells(readRow, readCol);
      myExcelCell.Value = myHTMLTableCell.innerText;
      myExcelCell.HorizontalAlignment = this.textAlign;
      myExcelCell.Font.Size = this.fontSize;
      myExcelCell.Font.Name = this.fontStyle;
      myExcelCell.wrapText = this.lineWrap;
      myExcelCell.Interior.ColorIndex = this.backGround;
      myExcelCell.Font.ColorIndex = this.fontColor;
      if(this.tableBorder != -1){
       myExcelCell.Borders(1).Weight = this.tableBorder ;
       myExcelCell.Borders(2).Weight = this.tableBorder ;
       myExcelCell.Borders(3).Weight = this.tableBorder ;
       myExcelCell.Borders(4).Weight = this.tableBorder ;
      }
      excelTable[readRow][readCol] = true;readCol = readCol + 1;
     }
    }
   }
   if(this.autoFit == true)
    myWorksheet.Columns.AutoFit; 
   jXls.UserControl = true;
   jXls = null;
   myWorkbook = null;
   myWorksheet = null;
  };

cornyjy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js导出jsp页面中的表格

最近在做一个应用，要将结果导出为excel,但是用于使在云平台上做的，原来想的是在后台生成excel然后下载下来，可是在百度云平台上不能动态的创建文件，所以只能用js将jsp页面的结果导出来。下面是jsp页面的代码：一个简答的结果页面：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncod
复制链接

扫一扫

专栏目录