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>

JSP 导出Excel表格的更多相关文章

  1. PHP导入导出excel表格图片(转)

    写excel的时候,我用过pear的库,也用过pack压包的头,同样那些利用smarty等作的简单替换xml的也用过,csv的就更不用谈了.呵呵.(COM方式不讲了,这种可读的太多了,我也写过利用wp ...

  2. java中使用jxl导出Excel表格详细通用步骤

    该方法一般接收两个参数,response和要导出的表格内容的list. 一般我们将数据库的数据查询出来在页面进行展示,根据用户需求,可能需要对页面数据进行导出. 此时只要将展示之前查询所得的数据放入s ...

  3. .NET环境下导出Excel表格的两种方式和导入两种类型的Excel表格

    一.导出Excel表格的两种方式,其中两种方式指的是导出XML数据类型的Excel(即保存的时候可以只需要修改扩展名为.xls)和真正的Excel这两种. using System; using Sy ...

  4. java导出excel表格

    java导出excel表格: 1.导入jar包 <dependency> <groupId>org.apache.poi</groupId> <artifac ...

  5. 使用NPOI将数据库里信息导出Excel表格并提示用户下载

    使用NPOI进行导出Excel表格大家基本都会,我在网上却很少找到导出Excel表格并提示下载的 简单的代码如下 //mvc项目可以传多个id以逗号相隔的字符串 public ActionResult ...

  6. VB.NET版机房收费系统---导出Excel表格

    datagridview,翻译成中文的意思是数据表格显示,使用DataGridView控件,能够显示和编辑来自不同类型的数据源的表格,将数据绑定到DataGridView控件很easy和直观,大多数情 ...

  7. JSP导出Excel后身份证后三位为0

    JSP导出Excel身份证号码超出Excel最大限制,用科学计数法表示,但后三位为0,修改方式: <style type="text/css">.txt    {    ...

  8. C#导出Excel表格方法

    using NPOI.SS.UserModel; using NPOI.XSSF.UserModel; using NPOI.SS.Formula.Functions; using System.Re ...

  9. Java代码导入导出 Excel 表格最简单的方法

    import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStrea ...

随机推荐

  1. KnockOut 绑定之foreach绑定(mvc+knockout)

    什么时候使用foreach绑定 foreach绑定对于数组中的每一个元素复制一节标记语言,也就是html,并且将这节标记语言和数组里面的每一个元素绑定.当我们呈现一组list数据,或者一个表格的时候, ...

  2. 服务器之ipmitool

    一般命令 raw #发送一个原始的IPMI请求,并且打印回复信息. Lan #配置网络(lan)信道(channel) chassis #查看底盘的状态和设置电源 event #向BMC发送一个已经定 ...

  3. urllib基本使用-Handler和自定义的opener()

    """ 基本的urlopen()方法不支持代理.cookie等其他的HTTP/HTTPS高级功能.所以要支持这些功能: 使用相关的 Handler处理器 来创建特定功能的 ...

  4. Unicode与UTF-8互转(c语言和lua语言)

    1. 基础 1.1 ASCII码 我们知道, 在计算机内部, 全部的信息终于都表示为一个二进制的字符串. 每个二进制 位(bit)有0和1两种状态, 因此八个二进制位就能够组合出 256种状态, 这被 ...

  5. Lucene索引文件组成

    Lucene的索引里面存了些什么,如何存放的,也即Lucene的索引文件格式,是读懂Lucene源代码的一把钥匙. 当我们真正进入到Lucene源代码之中的时候,我们会发现: Lucene的索引过程, ...

  6. linux 文本编辑器

    文本编辑器 文本编辑器是Linux操作系统中的重要工具.其中,VI是使用最广泛的文本编辑器,其可以在任何shell中使用.此外,Red Hat Enterprise Linux6 还提供了gedit工 ...

  7. coursera 《现代操作系统》 -- 第五周 同步机制(2)

    分清紧急等待队列与条件等待队列(c 链) 条件等待队列:但是进入管程的这个进程可能由于对资源的操作的过程中发现条件不成熟, 那么它就不能够继续对资源进行相应的操作. 我们以生产者. 消费者为例. 如果 ...

  8. ehcache缓存框架简介(一)

    EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中默认的CacheProvider. 我们使用EhCache缓存框架主要是为了判断重复Url,每次爬取一个网 ...

  9. JS续

    JS中的事件 [JS中的事件分类] * 1.鼠标事件: * click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup * * 2.键盘事 ...

  10. Vue中非父子组件传值的问题

    父子组件传值的问题,前面已经讲过,不再叙述,这里来说一种非父子组件的传值. vue官网指出,可以使用一个空vue实例作为事件中央线! 也就是说 非父子组件之间的通信,必须要有公共的实例(可以是空的), ...