你检查一下是不是表格里面有隐藏的表格或者元素之类的，如果有的话，重新设置一下就好啦，下面我们看下JS怎么导出excel的
创建一个html文件。接着在html文件中写入一个table表格并且在表格如一些内容，给这个表格加个id为table，一边后续的测试。
再接着就是看看在网上自己书写的表格是什么样子的。然后就是用js写一个函数用来将表格导出为excel文件。（函数名为AllAreaExcel）
最后就是书写一个按钮，用来执行书写好的函数。在网页上查看自己书写的按钮是长什么样子的。
点击网页上的按钮后，执行成功，就会弹出一个对话框为“成功”，如下图所示
完整代码：//导出excelfunction tableToExcel(){
var arrSor = ["sorttable10","sorttable30","sorttable60","sorttable120"]
let str = ""
for (var k = 0k <arrSor.lengthk++) {
var tab=document.getElementById(arrSor[k])
var rows=tab.rows
const jsonData = []
for(var i=2i<rows.lengthi++){ //遍历表格的行
var json = {}
for(var j=0j<rows[i].cells.lengthj++){ //遍历每行的列
json[(i+1)+"-"+(j+1)] = rows[i].cells[j].innerHTML
}
jsonData.push(json)
}
//列标题
let str1 = "<tr><td align='center' colspan='5'><b>最大"+arrSor[k].substring(9,arrSor[k].length)+"分钟雨量</b></td></tr>"
let str2 = "<tr align='center'><th>站点</th><th>站名</th><th>雨量最大值</th><th>降水时段</th><th>落入最大降水时段</th></tr>"
//循环遍历，每行加入tr标签，每个单元格加td标签
for(let i = 0 i <jsonData.length i++ ){
str2+='<tr>'
for(let item in jsonData[i]){
//增加\t为了不让表格显示科学计数法或者其他格式
var itemTem= jsonData[i][item]
if (itemTem == "暂无数据") {
str2+=`<td colspan='5' align='center'>${ itemTem + '\t'}</td>`
}else {
str2+=`<td align='center'>${ itemTem + '\t'}</td>`
}
}
str2+='</tr>'
}
let str3 = "<tr><td colspan='5'></td></tr>"
str += (str1 + str2 + str3)
}
let worksheet = '雨量最大值'
let uri = 'data:application/vnd.ms-excelbase64,'
//下载的表格模板数据
let 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><meta charset='UTF-8'><!--[if gte mso 9]><xml>
<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]-->
<style type="text/css">
table {border: 1px solid #000000}
table tr td b {background:#FFFFFFcolor:#3D3D3Dfont-size:24pxborder: 1px solid #000000}
table th {background:#AEE1FEcolor:#3D3D3Dfont-size:20pxborder: 1px solid #000000}
table td {background:#FFFFFFcolor:#3D3D3Dfont-size:20pxborder: 1px solid #000000}</style>
</head><body><table>${str}</table></body></html>`
//下载模板
// window.location.href = uri + this.base64(template)
var link = document.createElement("a")
link.href = uri + this.base64(template)
link.download = "雨量最大值-" +new Date().format("yyyy年MM月dd日 h时")+ ".xls"
link.style = "visibility:hidden"
document.body.appendChild(link)
link.click()
document.body.removeChild(link)}//输出base64编码function base64 (template) {
return window.btoa(unescape(encodeURIComponent(template))) }
解析：
遍历取出表，顺序是行从上往下，列从左往右，将数据存进数组，下面再拼接成表。
image.png
参考文章：https://blog.csdn.net/hhzzcc_/article/details/80419396
第一种方法（大量数据导出）
//导出excelfunction tableToExcel() {
var arrSor = ["sorttable10","sorttable30","sorttable60","sorttable120"]
let str = ""
for (var k = 0k <arrSor.lengthk++) {
var tab=document.getElementById(arrSor[k])
var rows=tab.rows
const jsonData = []
for(var i=2i<rows.lengthi++){ //遍历表格的行
var json = {}
for(var j=0j<rows[i].cells.lengthj++){ //遍历每行的列
if (rows[i].cells[j].outerHTML.indexOf("rgb(255, 255, 0)") != -1) {
json["yellow"+(i+1)+"-"+(j+1)] = rows[i].cells[j].innerHTML
}else {
json[(i+1)+"-"+(j+1)] = rows[i].cells[j].innerHTML
}
}
jsonData.push(json)
}
//列标题
let str1 = "<tr><td colspan='5' align='center' style='background-color:#FFFFFFfont-size:24pxborder: 1px solid #000000'><b>最大"
+arrSor[k].substring(9,arrSor[k].length)+"分钟雨量</b></td></tr>"
let str2 = "<tr>" +
"<th style='background-color:#AEE1FEfont-size:22pxborder: 1px solid #000000' align='center'>站点</th>" +
"<th style='background-color:#AEE1FEfont-size:22pxborder: 1px solid #000000' align='center'>站名</th>" +
"<th style='background-color:#AEE1FEfont-size:22pxborder: 1px solid #000000' align='center'>雨量最大值</th>" +
"<th style='background-color:#AEE1FEfont-size:22pxborder: 1px solid #000000' align='center'>降水时段</th>" +
"<th style='background-color:#AEE1FEfont-size:22pxborder: 1px solid #000000' align='center'>落入最大降水时段</th></tr>"
//循环遍历，每行加入tr标签，每个单元格加td标签
for(let i = 0 i <jsonData.length i++ ){
str2+="<tr align='center'>"
for(let item in jsonData[i]){
if (item.indexOf("yellow") != -1) {//取列数等于3
//增加\t为了不让表格显示科学计数法或者其他格式
var itemTem= jsonData[i][item]
if (itemTem == "暂无数据") {
str2+=`<td colspan='5' style='background-color:#FFFF00font-size:22pxborder: 1px solid #000000'> ${ itemTem + '\t'}</td>`
}else {
str2+=`<td style='background-color:#FFFF00font-size:22pxborder: 1px solid #000000'> ${ itemTem + '\t'}</td>`
}
}else {
//增加\t为了不让表格显示科学计数法或者其他格式
var itemTem= jsonData[i][item]
if (itemTem == "暂无数据") {
str2+=`<td colspan='5' style='background-color:#FFFFFFfont-size:22pxborder: 1px solid #000000'> ${ itemTem + '\t'}</td>`
}else {
str2+=`<td style='background-color:#FFFFFFfont-size:22pxborder: 1px solid #000000'> ${ itemTem + '\t'}</td>`
}
}
}
str2+='</tr>'
}
let str3 = "<tr><td colspan='5' style='background-color:#FFFFFFborder: 1px solid #000000'></td></tr>"
str += (str1 + str2 + str3)
}
var tableHtml="<html><head><meta charset='UTF-8'></head><body><table>"+str+"</body></html>"
var excelBlob = new Blob([tableHtml], {type: 'application/vnd.ms-excel'})
var fileName = "雨量最大值-"+new Date().format("yyyy年MM月dd日 h时")+".xls"
if(isIE()){
window.navigator.msSaveOrOpenBlob(excelBlob,fileName)
}else{
var oa = document.createElement('a')
oa.href = URL.createObjectURL(excelBlob)
oa.download = fileName
document.body.appendChild(oa)
oa.click()
}} //判断是否IE浏览器function isIE() {
if (!!window.ActiveXObject || "ActiveXObject" in window) {
return true
} else {
return false
}}
参考文章：https://blog.csdn.net/qq_34169240/article/details/84231226
无非是这样的一个过程。先通过数据库查询出数据，放到List里，然后把这个List发往页面，然后遍历这个List把数据显示到这个表格里。 要想把数据导出到execel，很简单，把页面接受的这个List用jxl写到Execel就行了。具体将List导出到Execel的类如下：
package cms.dao
import java.io.IOException
import java.io.OutputStream
import java.sql.Connection
import java.sql.PreparedStatement
import java.sql.ResultSet
import java.util.List
import javax.servlet.http.HttpServletResponse
import jxl.Workbook
import jxl.write.WritableSheet
import jxl.write.WritableWorkbook
import cms.utlis.DbUtils
public class ToExecelByQuery {
//方法接受两个参数，一个是list，这个地方我用了泛型。另一个参数是HttpServletResponse response
public static void toExcelBy(List<AccessLog>list,HttpServletResponse response) {
// 创建工作表
WritableWorkbook book=null
response.reset()
// 创建工作流
OutputStream os =null
try {
// 设置弹出对话框
response.setContentType("application/DOWLOAD")
// 设置工作表的标题
response.setHeader("Content-Disposition",
"attachmentfilename=****.xls")//设置生成的文件名字
os = response.getOutputStream()
// 初始化工作表
book = Workbook.createWorkbook(os)
} catch (IOException e1) {
// TODO Auto-generated catch block
e1.printStackTrace()
}
try{
//以下是我做的导出日志的一个模版
int nCount = list.size()
WritableSheet sheet = book.createSheet("访问日志", 0)
// 生成名为"商品信息"的工作表，参数0表示这是第一页
int nI = 1
// 表字段名
sheet.addCell(new jxl.write.Label(0, 0, "日志编号"))
sheet.addCell(new jxl.write.Label(1, 0, "用户ID"))
sheet.addCell(new jxl.write.Label(2, 0, "用户姓名"))
sheet.addCell(new jxl.write.Label(3, 0, "访问日期"))
sheet.addCell(new jxl.write.Label(4, 0, "访问时间"))
sheet.addCell(new jxl.write.Label(5, 0, "名片ID"))
sheet.addCell(new jxl.write.Label(6, 0, "名片名称"))
sheet.addCell(new jxl.write.Label(7, 0, "创建日期"))
sheet.addCell(new jxl.write.Label(8, 0, "更新日期"))
// 将数据追加
for(int i=1i<list.size()i++){
sheet.addCell(new jxl.write.Label(0, i, list.get(i).toString()))
sheet.addCell(new jxl.write.Label(1, i, list.get(i).getUserId()))
sheet.addCell(new jxl.write.Label(2, i, list.get(i).getUsername()))
sheet.addCell(new jxl.write.Label(3, i, list.get(i).getCrtTim()))
sheet.addCell(new jxl.write.Label(4, i, list.get(i).getComplTime()))
sheet.addCell(new jxl.write.Label(5, i, list.get(i).getCopId()))
sheet.addCell(new jxl.write.Label(6, i, list.get(i).getFirstname()))
sheet.addCell(new jxl.write.Label(7, i, list.get(i).getCrtTim()))
sheet.addCell(new jxl.write.Label(8, i, list.get(i).getUpdTim()))
}
book.write()
book.close()
} catch (Exception e) {
e.printStackTrace()
}
}
}
