实现带HTML页面样式的Excel导出

问题背景

遇到一个项目，要实现结果导出Ex cel文件，不仅要导出指定格式的Ex cel文件还要导出和页面显示效果一样有条件规则的颜色样式等。通过js实现指定页面区域并可实现带if条件结果的样式导出Ex cel。

设置导出操作按钮并指定事件

&lt;button id="export" style="display:none;background-color:#6293BB;height:35px" type="button" onclick="tableToExcel('testId','（Excel文件名）')"&gt;导出&lt;/button&gt;

编写导出函数及导出属性设置

&lt;script&gt;
    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>"}