JS 实现数据导出为Excel文件

  • 仅供参考,如有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 >
  				&nbsp;&nbsp;&nbsp;终止时间:
    			<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> 到  &nbsp;&nbsp;&nbsp;<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">
						&nbsp;&nbsp;
						</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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值