前端用html写excel文件直接打开
源码
<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>Sheet1</x:Name>
<x:WorksheetOptions>
<x:DisplayGridlines/>
</x:WorksheetOptions>
</x:ExcelWorksheet>
</x:ExcelWorksheets>
</x:ExcelWorkbook>
</xml>
<![endif]-->
</head>
<body>
<table border="1">
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
</tr>
<tr>
<td>Data1</td>
<td style="width: 250px; height: 40px;">
<img src="https://mmbiz.qpic.cn/sz_mmbiz_gif/BAhkmRPsSTRHJGSnTtkS8na0jjlkCIfbeZic9c56FXFZHvrPFKZE0zq4yKoZ14rLIuFmhmZst1Sm0l91P3IaTVA/640" width="80" height="40" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_gif/BAhkmRPsSTRHJGSnTtkS8na0jjlkCIfb16LNfFOec8WPgFia7iclSicQ5XibsK8ohCDGnHvHDHJLfe3BhMNfpvK6Sw/640" width="80;" height="40" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_gif/BAhkmRPsSTRHJGSnTtkS8na0jjlkCIfbXp1u0trKptUrj141tvFje1VO2FSwY47d2icJ4oKgZfnickFlLZfF0RYA/640" width="80" height="40" />
</td>
<td>Data3</td>
</tr>
</table>
</body>
</html>
讲解
.html文件直接用excel能打开就因为：
<!--[if gte mso 9]>
<xml>
<x:ExcelWorkbook>
<x:ExcelWorksheets>
<x:ExcelWorksheet>
<x:Name>Sheet1</x:Name>
<x:WorksheetOptions>
<x:DisplayGridlines/>
</x:WorksheetOptions>
</x:ExcelWorksheet>
</x:ExcelWorksheets>
</x:ExcelWorkbook>
</xml>
<![endif]-->
其中<!--[if gte mso 9]>就是声明 Microsoft Office 的 Excel 软件可读的。金山的WPS有点不太友好，金山的WPS和Microsoft Office 的 Excel 有点差异
生成
前端想生成excel文件可以直接封装html组件了，改成 .xls 后缀名即可。可以不用js插件了
案例
<html
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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--[if gte mso 9]>
<xml>
<x:ExcelWorkbook>
<x:ExcelWorksheets>
<x:ExcelWorksheet>
<x:Name> </x:Name>
<x:WorksheetOptions>
<x:Selected />
</x:WorksheetOptions>
</x:ExcelWorksheet>
</x:ExcelWorksheets>
</x:ExcelWorkbook>
</xml>
<![endif]-->
<style type="text/css">
.td {
width: 84px;
}
.gdtjContainer .tb tr {
text-align: center;
vertical-align: middle;
}
.gdtjContainer .tb th {
border-left: 0.5pt solid #000;
border-bottom: 0.5pt solid #000;
text-align: center;
font-weight: normal;
font-size: 10pt;
height: 30px;
}
.gdtjContainer .header th {
font-size: 12pt;
}
.gdtjContainer .tb tr th.noleftborder {
border-left: none;
}
.gdtjContainer .tb tr th.rightborder {
border-right: 0.5pt solid #000;
}
</style>
</head>
<body>
<div class="gdtjContainer">
<table
class="tb"
cellspacing="0"
cellpadding="0"
border="0"
width="2184px"
>
<colgroup>
<col class="td" />
<col class="td" />
<col class="td" />
<col class="td" />
<col class="td" />
<col class="td" />
<col class="td" />
<col class="td" />
<col class="td" />
<col class="td" />
<col class="td" />
<col class="td" />
<col class="td" />
<col class="td" />
<col class="td" />
<col class="td" />
<col class="td" />
<col class="td" />
<col class="td" />
<col class="td" />
<col class="td" />
<col class="td" />
<col class="td" />
<col class="td" />
<col class="td" />
<col class="td" />
</colgroup>
<tr style="height: 40px">
<th
style="font-size: 20pt; font-family: 宋体; border: none"
colspan="26"
>
2011年增城市单位土地使用权出让情况登记表（统计时间从2011-06-29至2011-06-30）
</th>
</tr>
<tr>
<th colspan="23" style="border-left: none"> </th>
<th
style="text-align: left; font-size: 12pt; border-left: none"
colspan="3"
>
单位：万元、平方米
</th>
</tr>
<tr class="header">
<th rowspan="2">合同编号</th>
<th colspan="2" rowspan="2">用地单位</th>
<th colspan="2" rowspan="2">土地座落</th>
<th rowspan="2">供地面积</th>
<th style="border-left: none"> </th>
<th> </th>
<th rowspan="2">用途</th>
<th colspan="3" rowspan="1">出让金</th>
<th rowspan="2">容积率</th>
<th rowspan="2">建筑密度</th>
<th rowspan="2">绿地率</th>
<th rowspan="2">规划建筑面积</th>
<th rowspan="2">出让方式</th>
<th rowspan="2">审批日期</th>
<th rowspan="2">合同签订日期</th>
<th rowspan="2">动工期限</th>
<th rowspan="2">竣工日期</th>
<th rowspan="2">批次情况</th>
<th rowspan="2">合同约定缴费期限</th>
<th rowspan="2">缴费情况</th>
<th rowspan="2">滞纳金</th>
<th rowspan="2" class="rightborder">备注</th>
</tr>
<tr style="height: 40px" class="header">
<th>新增面积</th>
<th style="font-size: 10pt">保障性住房用地占用面积</th>
<th>应缴</th>
<th>已缴</th>
<th>未缴</th>
</tr>
<tr>
<th>440183-2011-</th>
<th colspan="2">45654</th>
<th colspan="2"> </th>
<th>1110000</th>
<th> </th>
<th> </th>
<th> </th>
<th>111</th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th>拍卖出让</th>
<th> </th>
<th>2011-06-29</th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th class="rightborder"> </th>
</tr>
<tr>
<th> </th>
<th colspan="2">合计</th>
<th colspan="2"> </th>
<th>1110000</th>
<th> </th>
<th> </th>
<th> </th>
<th>111</th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th class="rightborder"> </th>
</tr>
</table>
</div>
</body>
</html>
