问 题 背 景
遇到一个项目，要实现结果导出Excel文件，不仅要导出指定格式的Excel文件还要导出和页面显示效果一样有条件规则的颜色样式等。通过js实现指定页面区域并可实现带if条件结果的样式导出Excel。
设置导出操作按钮并指定事件
<button id="export" style="display:none;background-color:#6293BB;height:35px" type="button" onclick="tableToExcel('testId','（Excel文件名）')">导出</button>编写导出函数及导出属性设置
<script>
function base64 (content) {
return window.btoa(unescape(encodeURIComponent(content)));
}
/*
*@tableID: table标签的Id
*/
function tableToExcel(tableID,fileName){
var ofMonth=$("#ofMonth").val().replace("-", "年")+"月";
var table = document.getElementById(tableID);
var excelContent = table.innerHTML;
var excelFile = "<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'>";
excelFile += "<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>("+ofMonth（传入参数）+")@fileName: 要生成excel文件的名字（不包括后缀，可随意填写）</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head>";
excelFile += "<body><table border='1'>";
excelFile += excelContent;
excelFile += "</table></body>";
excelFile += "</html>";
var link = "data:application/vnd.ms-excel;base64," + base64(excelFile);
var a = document.createElement("a");
a.download =ofMonth+fileName+".xls";
a.href = link;
a.click();
}
</script>3、table代码
<table id="testId" border="1" style="width:1500;border-color:black;border-collapse:collapse;">
<tr style="height:25;font-weight:bold;font-size:20">
<th colspan=14>导出表<span id="dtMonth"></span></th>
</tr>
<tr style="height:25;font-weight:bold;font-size:20">
<th colspan=14>测试标题</th>
</tr>
<tr style="font-weight:bold;background-color:#dcdcdc">
<th rowspan=2 style="width:50">序号</th>
<th rowspan=2 style="width:250">测试标题</th>
<th style="width:100">测试标题</th>
<th colspan=3 style="width:300">测试标题</th>
<th colspan=8 style="width:800">测试标题</th>
</tr>
<tr style="font-weight:bold;background-color:#dcdcdc">
<th style="width:100">测试标题</th>
<th style="width:100">测试标题</th>
<th colspan=2 style="width:200">测试标题</th>
<th style="width:100">测试标题</th>
<th style="width:100">测试标题</th>
<th colspan=2 style="width:200">测试标题</th>
<th colspan=2 style="width:200">测试标题</th>
<th style="width:100">测试标题</th>
<th style="width:100">测试标题</th>
</tr>
<tbody id="content1">
</tbody>
</table>4、数据部分条件样式部分代码
html+="<tr style='text-align:center;'>"+"<td>"+index+"</td>"+"<td>"+item.testdata+"</td>"
if (item.testdata!=0){if(item.testdata>=cuslog.avgitem.testdata){
html+="<td style='background-color: blue;'>"+item.testdata.toFixed(4)+"</td>"
}else if(item.testdata>=cusloy.avgitem.testdata){
html+="<td style='background-color: yellow;'>"+item.testdata.toFixed(4)+"</td>"
}else{
html+="<td style='background-color: green;'>"+item.testdata.toFixed(4)+"</td>"
}}else{
html+="<td style='background-color: red;'>"+item.testdata.toFixed(4)+"</td>"}