- 仅供参考,如有Bug,出门百度。
先引入js 插件 —— xlsx.full.min.js
直接上代码以后修改直接用
主要关注JS 部分
<%@page import="java.util.LinkedHashMap"%>
<%@page import="java.util.ArrayList"%>
<%@page import="net.sf.json.JSONArray"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.List"%>
<%@page import="java.lang.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ include file="/basecore/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>黄标车库管理</title>
<%@ include file="/basecore/meta.jsp"%>
<%@ include file="/basecore/ecform.jsp"%>
<%@ include file="/basecore/date97picker.jsp"%>
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/index.css" type="text/css">
<style> .select-input{ width:120px;}</style>
<script type="text/javascript">
if('${refreshTree}'){
//parent.nav.freshTreeNode('${sjbmbm}');
//alert('${original_sjbmbm}');
//alert('${sjbmbm}');
parent.nav.reAsyncChildNodes('${refreshTree}','${original_sjbmbm}','${sjbmbm}');
}
var tmpDown; //导出的二进制对象
var jsono=""
function downloadExl(jsons, type) {
json=JSON.parse($("#hiddenValue").val())
console.log(json)
var tmpdata = json[0];
json.unshift({});
var keyMap = []; //获取keys
for (var k in tmpdata) {
keyMap.push(k);
if(k =='TITLE'){
json[0][k] = "一站式非现场违法处理${tableName}";
}else{
json[0][k] = "";
}
}
var tmpdata = [];//用来保存转换好的json
json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
v: v[k],
position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
}))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {
v: v.v
});
tmpdata["A1"].s = { alignment: { horizontal: "center", vertical: "center", wrap_text: true },
font: { sz: 30, bold: true } ,
};//<====设置xlsx单元格样式
console.log(tmpdata);
var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10
var tmpWB = {
SheetNames: ['mySheet'], //保存的表标题
Sheets: {
'mySheet': Object.assign({},
tmpdata, //内容
{
'!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] ,//设置填充区域
'!merges':[{
s: {c: 0,r: 0},e: {c: keyMap.length-1,r:0}
}], // 合并单元格
'!rows':[{hpx: 40}]
})
}
};
tmpDown = new Blob([s2ab(XLSX.write(tmpWB,
{bookType: (type == undefined ? 'xlsx':type),bookSST: false, type: 'binary'}//这里的数据是用来定义导出的格式类型
))], {
type: ""
}); //创建二进制对象写入转换好的字节流
var href = URL.createObjectURL(tmpDown); //创建对象超链接
document.getElementById("hf").href = href; //绑定a标签
document.getElementById("hf").click(); //模拟点击实现下载
setTimeout(function() { //延时释放
URL.revokeObjectURL(tmpDown); //用URL.revokeObjectURL()来释放这个object URL
}, 100);
}
function s2ab(s) { //字符串转字符流
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
// 将指定的自然数转换为26进制表示。映射关系:[0-25] -> [A-Z]。
function getCharCol(n) {
let temCol = '',
s = '',
m = 0
while (n > 0) {
m = n % 26 + 1
s = String.fromCharCode(m + 64) + s
n = (n - m) / 26
}
return s
}
</script>
</head>
<body>
<a href="" download="一站式非现场违法处理${tableName}.xlsx" id="hf"></a>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"class="table_quyu">
<tr class="beijing_shenlan" >
<td height="23" class="font_biaoti">违法管理——统计报表</td>
<td height="23" class="font_biaoti" id="msg" style="color:red"></td>
</tr>
</table>
<form id="ec" name="ec" action="${action}.do?actiontype=input_yh" method="post">
<table style="margin:5px 10px; background-color: #f7f7f7">
<tr>
<td >
起始时间:
<input id="kssj" name="kssj" style="width:120px;" class="input-text" value="${kssj}"
onClick="WdatePicker({skin:'twoer',dateFmt:'yyyy-MM-dd'})"/>
</td>
<td >
终止时间:
<input id="zzsj" name="zzsj" style="width:120px;" class="input-text" value="${zzsj}"
onClick="WdatePicker({skin:'twoer',dateFmt:'yyyy-MM-dd'})"/>
</td>
<td>
<button type="submit" class="sexybutton">
<span><span><span class="find">统计</span></span></span>
</button>
<button type="button" class="sexybutton" id="export" onclick="downloadExl(jsono)">
<span><span><span>导出报表</span></span></span>
</button>
</td>
</tr>
</table>
</form>
<div style="padding-top: 20px;">
<hr style="width:100% "/>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<tr>
<td colspan="2" align="center">
<p style="font-size: 2em" >一站式非现场违法处理${tableName}</p>
</td>
</tr>
<tr >
<td align="left" style="padding-left: 2.5%;padding-top:10px;padding-bottom:10px">
统计时间范围:<span style="color:red ">${kssj}</span> 到 <span style="color:red ">${zzsj}</span>
</td>
</tr>
</table>
</div>
<div style="">
<table cellpadding="0" cellspacing="0" border="1" align="center" width="96%" style="margin-left: 2.5%">
<%
List<Map<String,Object>> list =(List<Map<String,Object>> )request.getAttribute("dataList");
String titlestr ="";
String actiontype = (String)request.getAttribute("actiontype");
if("input_yh".equals(actiontype)){
titlestr="TITLE,DATA1,DATA2,DATA3";
}
List datasList = new ArrayList();
for(int i=0;i<list.size();i++){
%>
<tr>
<%
Map<String,Object> map= list.get(i);
Map<String,Object> dataMap = new LinkedHashMap<String,Object>();
String [] title = titlestr.split(",");
for(int j=0;j<title.length;j++){
if(j==2 && i>0){
int num = Integer.parseInt((String)map.get(title[j]));
if(num >=0){
dataMap.put(title[j], "需要从归集帐户转出");
%>
<td style="height:40px" align="center">
需要从归集帐户转出
</td>
<%
}else{
dataMap.put(title[j], "需要存入归集帐户");
%>
<td style="height:40px" align="center">
需要存入归集帐户
</td>
<%
}
}else if(j==3 && i>0){
dataMap.put(title[j], "");
%>
<td style="height:40px" align="center">
</td>
<%
}else{
dataMap.put(title[j], map.get(title[j]));
%>
<td style="height:40px" align="center">
<%=map.get(title[j])%>
</td>
<%
}
}
datasList.add(dataMap);
%>
</tr>
<%
}
%>
<input type="hidden" id="hiddenValue" value=<%=JSONArray.fromObject(datasList).toString()%> />
<%
%>
</table>
</div>
</body>
</html>