JSP 导出Excel表格
2024-09-04 18:14:12
ES6语法 传入一个table的id,然后在导出excel按钮上加入一个<a href="#" id="buttonId">导出Excel</a>放里面,是用来修改导出的文件名,就可以导出Excel;具体方法就下面这一个就够了
// tableId 传null 表示自动获取页面的第一格table,buttonId 传null 表示自动生成,fileName表示导出的文件名(Excel文件名)
export function tableToExcel(tableId, buttonId, fileName) {
let table = document.getElementById(tableId)
if(table === null || table === undefined) {
table = document.getElementsByTagName('table')[0]
}
// 克隆(复制)此table元素,这样对复制品进行修改(如添加或改变table的标题等),导出复制品,而不影响原table在浏览器中的展示。
// table = table.cloneNode(true)
const uri = 'data:application/vnd.ms-excel;base64,'
const template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><?xml version="1.0" encoding="UTF-8" standalone="yes"?><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table style="vnd.ms-excel.numberformat:@">{table}</table></body></html>'
const base64 = function(s) {
return window.btoa(unescape(encodeURIComponent(s)))
}
const format = function(s, c) {
return s.replace(/{(\w+)}/g, function(m, p) {
return c[p]
})
}
if(!table.nodeType) table = document.getElementById(table)
const ctx = {
worksheet: '',
table: table.innerHTML
}
// window.location.href = uri + base64(format(template, ctx))
if(buttonId === null || buttonId === undefined) {
const dom_a = document.createElement('a') // 1、创建元素
dom_a.style.visibility = 'hidden'
table.insertBefore(dom_a, table.childNodes[0]) // 插入到最左边
dom_a.href = uri + base64(format(template, ctx))
dom_a.download = fileName
dom_a.click()
} else {
document.getElementById(buttonId).href = uri + base64(format(template, ctx))
document.getElementById(buttonId).download = fileName
}
}
对应一个JS的版本:
function export(tableId){
var table = document.getElementById(mytalbe);
// 克隆(复制)此table元素,这样对复制品进行修改(如添加或改变table的标题等),导出复制品,而不影响原table在浏览器中的展示。
table = table.cloneNode(true);
var uri = 'data:application/vnd.ms-excel;base64,',
template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><?xml version="1.0" encoding="UTF-8" standalone="yes"?><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table style="vnd.ms-excel.numberformat:@">{table}</table></body></html>',
base64 = function(s) {
return window.btoa(unescape(encodeURIComponent(s)));
},
format = function(s, c) {
return s.replace(/{(\w+)}/g, function(m, p) {
return c[p];
});
};
if(!table.nodeType) table = document.getElementById(table);
var ctx = {
worksheet: name || 'Worksheet',
table: table.innerHTML
};
window.location.href = uri + base64(format(template, ctx));
}
===========下面是历史方法(OUT)==============================================================
java 后台返回一个ModelAndView 对象,然后加入这2行设置
response.setContentType("application/vnd.ms-excel");
response.setHeader("Content-disposition","attachment;filename=" + URLEncoder.encode("会员列表.xls", "UTF-8"));
业可以把这二行设置放入JSP中
在jsp代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
response.setContentType("application/vnd.ms-excel");
response.setHeader("Content-disposition","attachment;filename=" + java.net.URLEncoder.encode("会员列表.xls", "UTF-8"));
%>
<!DOCTYPE html>
<html>
<head>
<title>CMS-会员管理</title>
<meta charset="utf-8" />
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
</head>
<body> <table id="sample-table-1" border="1" cellpadding="2" cellspacing="1">
<thead>
<tr>
<th nowrap width="15%">序号</th>
<th nowrap width="5%">卡号</th>
<th nowrap width="5%">姓名</th>
<th nowrap width="5%">年龄</th> </tr>
</thead>
<tbody>
<c:forEach items="${list}" var="model" varStatus="status" >
<tr>
<td>${model.id}</td>
<td>${model.cardNo}</td>
<td>${model.name}</td>
<td>${model.age}</td>
</tr>
</c:forEach>
</tbody>
</table>
</body>
</html>
最新文章
- CSS常用背景图片定位方法
- re.S
- arm上的参数列表传递的分析(以android为例)
- 【BZOJ 3036】 绿豆蛙的归宿
- HTTP消息中header头部信息的讲解
- aspose.word 在书签处插入符号
- git clone之后自动checkout文件处理
- Repository在DDD中的应用
- Amdahl&#39;s Law
- 优化php性能的一点总结
- SQL检测开始日期 结束日期 是否存在交叉
- Vijos 1002 过河 状态压缩DP
- HTML5中的checkbox
- 运维技巧-Nginx日志格式
- linux学习之路(1)
- 编译树莓派2代B型OpenWrt固件实现无线路由器及nodogsplash认证功能
- HDU 1840 Equations (简单数学 + 水题)(Java版)
- IE和其他浏览器内核
- boost range zhuan
- gcc和gdb使用笔记
热门文章
- Unity3D学习笔记——NGUI使用常见问题
- 第1周---python网络爬虫规则
- 利用Lucene将被索引文件目录中的所有文件建立索引
- PHP中mysql_fetch_row()、mysql_fetch_assoc()和mysql_fetch_array()的联系
- Yue Fei&#39;s Battle(组合计数递推)
- 基于apache —HttpClient的小爬虫获取网页内容
- AJAX 入门
- 洛谷 P1462 通往奥格瑞玛的道路
- 0x05 MySQL 数据操作
- Python3.6全栈开发实例[004]