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>