基于jquery的tableExportJs的导出文件（附带打印功能）
程序员文章站
2022-07-15 10:37:52
...
上图是根据假数据自己画的表格，用来演示导出和打印。
导出效果图：
打印效果图：
ok，开始上代码：
代码结构：
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#printTable th,#printTable td{
border:1px solid #ccc;
font-size:0.8rem;
text-align: center;
padding:0.3rem 0.2rem;
}
#printTitle{
font-size: 1.5625rem;
margin:20px auto;
text-align: center;
}
#sceondTr td{
text-align: left;
background:#f5f6f7;
}
</style>
</head>
<body>
<div class="printDataBox" id="printDataBox">
<div id="printTitle">表格名字</div>
<table id="printTable" style="width: 90%;margin:20px auto;border:1px solid #000; border-collapse: collapse; border-spacing: 0;">
<thead>
<tr id="printTheadTr"></tr>
<tr id="sceondTr"></tr>
<tr id="thirdTr"></tr>
</thead>
<tbody id="printTbody"></tbody>
</table>
</div>
<div style="margin:20px auto;text-align: center;">
<button onclick="exportTable()">导出</button>
<button onclick="printTable()">打印</button>
</div>
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/tableExport.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.base64.js" type="text/javascript" charset="utf-8"></script>
<script src="js/exportPrint.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>exportPrint.js部分：
var mapData = [//假数据
{
stationName:"收费站1",
carList:[
{carName:'汽车1',carNum:11,carMoney:110},
{carName:'汽车2',carNum:12,carMoney:120},
{carName:'汽车3',carNum:13,carMoney:130},
{carName:'汽车4',carNum:14,carMoney:140},
{carName:'汽车5',carNum:15,carMoney:150},
{carName:'汽车6',carNum:16,carMoney:160}
]
},
{
stationName:"收费站2",
carList:[
{carName:'汽车1',carNum:21,carMoney:210},
{carName:'汽车2',carNum:22,carMoney:220},
{carName:'汽车3',carNum:23,carMoney:230},
{carName:'汽车7',carNum:27,carMoney:270}
]
},
{
stationName:"收费站3",
carList:[
{carName:'汽车7',carNum:37,carMoney:370},
{carName:'汽车8',carNum:38,carMoney:380},
{carName:'汽车9',carNum:39,carMoney:390},
{carName:'汽车0',carNum:30,carMoney:300}
]
}
];
restDataNewTable(mapData);//整理数据,画报表
function restDataNewTable(mapData){//整理数据
let allCarList = [];//统计所有车
mapData.forEach(item=>{
allCarList = allCarList.concat(item.carList);
})
let obj = {},carNameList = [];
allCarList = allCarList.reduce(function(item, next) {
obj[next.carName] ? '' : obj[next.carName] = true && item.push(next);
return item;
}, []);//把统计的车型去重
carNameList = Object.keys(obj);//获取所有车型的名称
let theadThs = '<th>收费站名称</th>';//table的thead下的th数据,默认设置thead的第一个格数据为 收费站名称
let thirdTrTds = '<td></td>'//整个表格第三行数据，默认第一个格子数据为空
allCarList.forEach(car=>{//根据循环来渲染thead剩余数据和第三行其他数据
theadThs+=`
<th>${car.carName}</th><th> </th>
`
thirdTrTds+=`
<td>车辆数</td><td>收益额</td>
`
})
$("#printTheadTr").append(theadThs);//thead数据渲染
$("#thirdTr").append(thirdTrTds);//第三行数据渲染
let thNum = $("#printTheadTr").children().length;//thead下所有th的个数，用来设置第二行数据colspan
let sceondTrHtml = `
<td colspan="${thNum}">收益拆分明细</td>
`
$("#sceondTr").append(sceondTrHtml);//整个表格第二行数据，默认收益拆分明细
let tbodyHtml = '';//整个tbody的数据
mapData.forEach(station=>{//tbody下数据
let tbodyTr = `<tr><td>${station.stationName}</td>`//行的开头为分公司名称或者收费站名称
carNameList.forEach(carName=>{//设置其他列数据
let flag = station.carList.some(car=>{//判断是否存在于所有的车型中
return car.carName === carName
});
if(flag){//如果存在
station.carList.forEach(appendCar=>{
if(appendCar.carName === carName){//直接将对应的车辆数和收益额给渲染上
tbodyTr += `
<td>${appendCar.carNum}</td><td>${appendCar.carMoney}</td>
`
}
})
}else{//如果不存在，则用0补齐
tbodyTr += `
<td>0</td><td>0</td>
`
}
})
tbodyTr += `</tr>`//tbody的行结尾
tbodyHtml += tbodyTr
})
$("#printTbody").append(tbodyHtml);//渲染tbody数据
}
function exportTable(){//导出表格
$('#printTable').tableExport({
type:'excel',
escape:'false',
fileName: '表格名字'
});
}
function printTable() {//打印表格
let div = document.createElement("div");
let style = `
<style>
#printTable th,#printTable td{
border:1px solid #ccc;
text-align: center;
font-size:0.8rem;
padding:0.3rem 0.2rem;
}
#printTitle{
font-size: 1.5625rem;
margin:20px auto;
text-align: center;
}
#sceondTr td{
text-align: left;
background:#f5f6f7;
}
</style>
`
$(div).append($("#printDataBox").html())
let newPage = window.open("打印窗口", "_blank");
newPage.document.write(style + $(div).prop("outerHTML"));
newPage.document.close();
newPage.print();
newPage.close();
}代码很简单，注释也很清楚！
tableExport原文件不支持自定义文件名导出，在源码基础上做了一些小的改动，成功得到想要的文件。
源码地址：https://download.csdn.net/download/sjt1010/12713050。
如有不足之处，请多多指出，谢谢！
欢迎各位大佬来踩！！