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. GetWindowText 卡死的一种可能的原因

    最近一个项目中碰到GetWindowText经常卡死的问题,这个项目有多个线程,检查代码发现发生死锁的是一个数据线程和一个UI线程. 示意图大致如下(data thread和UI thread在同一个 ...

  2. VC++ 汇编相关的东西

    Tips: VC++在新建一个.asm文件后必须重新导入project中才能进行编译. 下面是一个汇编与C++相互调用的例子: Main.cpp #include <stdio.h> #i ...

  3. 41个Web开发者必须收藏的JavaScript实用技巧

    1. 将彻底屏蔽鼠标右键 oncontextmenu=”window.event.returnValue=false” < table border oncontextmenu=return(f ...

  4. yii2 刷新缓存（刷新模型缓存）

    Yii2开启表结构缓存,因为当运用模型(model)时,AR的一些公共属性都会从DB中获取,这样会导致服务器负担一些额外的资源开销,实际上对于成品来说,服务器这些开始销是多余的,故应该阻止这种默认行为 ...

  5. Linux学习目录

    一.CentOS for Linux 大神博客:骏马金龙  Linux也可以参考,这篇博客进行学习 http://www.cnblogs.com/f-ck-need-u/p/7048359.html ...

  6. gcc 编译 连接 生成可执行文件

    gcc c语言编译器 g++ c++编译器 gcc a.c  生成默认的a.out 可执行文件  ./a.out  来执行 gcc -c a.c 编译生成 a.o 目标文件 可以检查语法错误 gcc ...

  7. Android无线测试之—UiAutomator UiDevice API介绍五

    屏幕旋转 一.屏幕旋转相关知识: 1)旋转方向:0度,90度(向左转),180度,270度(向右转) 2)重力感应器:重力感应器是旋转所依靠的 3)固定位置:指将屏幕方向固定在0度,90度或者180度 ...

  8. python学习【第十篇】单例设计模式

    单例设计模式 目的:让类创建对象,在系统中只有唯一的实例,让每一次创建的对象返回的内存地址都是相同的. __new__方法 使用类名创建对象时,python解释器首先会调用__new__方法为对象分配 ...

  9. 【BZOJ1863】[Zjoi2006]trouble 皇帝的烦恼 二分+DP

    [BZOJ1863][Zjoi2006]trouble 皇帝的烦恼 Description 经过多年的杀戮,秦皇终于统一了中国.为了抵御外来的侵略,他准备在国土边境安置n名将军.不幸的是这n名将军羽翼 ...

  10. 巨蟒django之权限7:动态生成一级&&二级菜单

    内容回顾: . 权限的控制 . 表结构设计 存权限的信息 用户表 - name 用户名 - pwd 密码 - roles 多对多 角色表 - name - permissions 多对多 权限表 - ...