Excel前端生成

1.前言，由于在业务中导出的Excel在后端生成,不断的去进行写入IO的操作导致CPU使用率太高。所有对方法进行优化该为前端生成Excel

//请求获取到对应的数据这个时候就可以根据数据去写入模板里
$.ajax({
                    contentType : "text/text; charset=UTF-8",
                    url : "../../../../realestate/resources/workflow/template/Excel.htm",
                    dateType : "html",
                    type : "GET",
                    success : function(gettpl) {

                    },
                    error : function(a, b, c) {

                    },
                    complete : function(a, b) {
                        laytpl(a.responseText).render(data, function(html) {
                            openWinToPrint(html)
                        });
                    }
                })

//获取到模板在里面对数据进行拼接和Form循环
<table border="1"  cellspacing="0">
    <th height="40" colspan="21" style="font-size:24px">
        <div align="center" id="">房屋查询结果</div>
    </th>
    <tr >
        <td height="40" width="120">
            <div align="center">序号</div>
        </td>
        <td  height="40" width="440">
            <div align="center">坐落</div>
        </td>
        <td height="40" width="300">
            <div align="center">不动产单元号</div>
        </td>
        <td height="40" width="120">
            <div align="center">房屋类型</div>
        </td>
        <td height="40" width="300">
            <div align="center">房号</div>
        </td>
        <td height="40" width="400">
            <div align="center">权利人</div>
        </td>
        <td height="40" width="350">
            <div align="center">证件号</div>
        </td>
        <td height="40" width="440">
            <div align="center">权证号</div>
        </td>
        <td height="40" width="120">
            <div align="center">规划用途</div>
        </td>
        <td height="40" width="350">
            <div align="center">建筑面积</div>
        </td>
        <td height="40" width="350">
            <div align="center">套内建筑面积</div>
        </td>
        <td height="40" width="350">
            <div align="center">分摊面积</div>
        </td>
        <td height="40" width="120">
            <div align="center">抵押状态</div>
        </td>
        <td height="40" width="120">
            <div align="center">抵押人</div>
        </td>
        <td height="40" width="440">
            <div align="center">抵押期限</div>
        </td>
        <td height="40" width="120">
            <div align="center">查封状态</div>
        </td>
        <td height="40" width="120">
            <div align="center">查封结构</div>
        </td>
        <td height="40" width="120">
            <div align="center">查封文号</div>
        </td>
        <td height="40" width="120">
            <div align="center">查封期限</div>
        </td>
        <td height="40" width="120">
            <div align="center">异议状态</div>
        </td>
    </tr>

    {{# $.each(d.rows?d.rows:[],function(index,item){  }}
    <tr>
        <td width="150" height="40" style="mso-number-format: '\@';">
            <div align="center">{{index}}</div>
        </td>
        <td width="150" height="40" style="mso-number-format: '\@';">
            <div align="center">{{item.ZL?item.ZL:''}}</div>
        </td>
        <td width="150" height="40" style="mso-number-format: '\@';">
            <div align="center">{{item.BDCDYH?item.BDCDYH:''}}</div>
        </td>
        <td width="150" height="40" style="mso-number-format: '\@';">
            <div align="center">{{item.BDCDYLXMC?item.BDCDYLXMC:''}}</div>
        </td>
        <td width="150" height="40" style="mso-number-format: '\@';">
            <div align="center">{{item.FH?item.FH:''}}</div>
        </td>
        <td width="150" height="40" style="mso-number-format: '\@';">
            <div align="center">{{item.QLRMC?item.QLRMC:''}}</div>
        </td>
        <td width="150" height="40" style="mso-number-format: '\@';">
            <div align="center">{{item.ZJHM?item.ZJHM:''}}</div>
        </td>
        <td width="150" height="40" style="mso-number-format: '\@';">
            <div align="center">{{item.BDCQZH?item.BDCQZH:''}}</div>
        </td>
        <td width="150" height="40" style="mso-number-format: '\@';">
            <div align="center">{{item.GHYTname?item.GHYTname:''}}</div>
        </td>
        <td width="150" height="40" style="mso-number-format: '\@';">
            <div align="center">{{item.SCJZMJ?item.SCJZMJ:''}}</div>
        </td>
        <td width="150" height="40" style="mso-number-format: '\@';">
            <div align="center">{{item.SCTNJZMJ?item.SCTNJZMJ:''}}</div>
        </td>
        <td width="150" height="40" style="mso-number-format: '\@';">
            <div align="center">{{item.SCTNJZMJ?item.SCFTJZMJ:''}}</div>
        </td>
        <td width="150" height="40" style="mso-number-format: '\@';">
            <div align="center">{{item.DYZT?item.DYZT:''}}</div>
        </td>
        <td width="150" height="40" style="mso-number-format: '\@';">
            <div align="center">{{item.DYR?item.DYR:''}}</div>
        </td>
        <td width="150" height="40" style="mso-number-format: '\@';">
            <div align="center">{{item.DYQX?item.DYQX:''}}</div>
        </td>
        <td width="150" height="40" style="mso-number-format: '\@';">
            <div align="center">{{item.CFZT?item.CFZT:''}}</div>
        </td>
        <td width="150" height="40" style="mso-number-format: '\@';">
            <div align="center">{{item.CFJG?item.CFJG:''}}</div>
        </td>
        <td width="150" height="40" style="mso-number-format: '\@';">
            <div align="center">{{item.CFWH?item.CFWH:''}}</div>
        </td>
        <td width="150" height="40" style="mso-number-format: '\@';">
            <div align="center">{{item.CFQX?item.CFQX:''}}</div>
        </td>
        <td width="150" height="40" style="mso-number-format: '\@';">
            <div align="center">{{item.YYZT?item.YYZT:''}}</div>
        </td>
    </tr>
    {{# }) }}
</table>

//最后获取到数据进行拼接
 function openWinToPrint(printHtml) {
            printHtml = replaceAllRGB(printHtml);// 去掉背景颜色
            var xlsContent = '<html data:text/csv;charset=utf-8,\ufeff xmlns:v="urn:schemas-microsoft-com:vml" 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 name=ProgId content=Excel.Sheet /> <meta http-equiv="Content-Type" content = "text/html;charset=utf-8"/></head><body>'
                + printHtml + '</body></html>';
            var blob = new Blob([xlsContent], { type: "application/vnd.ms-excel" });
            var link = document.createElement("a");
            var href = URL.createObjectURL(blob);
            link.href = href;
            link.download = "房屋查询.xls";
            link.innerHTML = "下载xls"
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(href);

        }