<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form id="TableList" action="BridgeLofting">
<table id="BridgeLofting" border="1" width="800px">
<tbody>
<tr>
<td colspan="2" style=" border:none"></td>
<td colspan="3" style=" border:none"></td>
<td colspan="1" style="100%;float:right;border:none"><span style="font-size:20px">工程项目</span></td>
<td colspan="2" style=" border:none"></td>
</tr>
<tr>
<td colspan="8" style=" border:none;text-align:center"><span style="font-size:20px">桥(涵)位放样原始记录表</span></td>
</tr>
<tr>
<td colspan="1" style=" border:none"><span>承包单位:</span></td>
<td colspan="4" style=" border:none"></td>
<td colspan="1" style=" border:none"><span>合同号:</span></td>
<td colspan="2" style=" border:none"></td>
</tr>
<tr>
<td colspan="1" style=" border:none"> <span>监理单位:</span></td>
<td colspan="4" style=" border:none"></td>
<td colspan="1" style=" border:none"> <span>编 号：</span></td>
<td colspan="2" style=" border:none"></td>
</tr>
<tr>
<td colspan="8" style="100%;height:36px;text-align:right;border:none"> <span>E-11</span></td>
</tr>
<tr>
<td colspan="2">工程名称</td>
<td colspan="3"></td>
<td colspan="1">日期</td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">结构物名称及桩号</td>
<td colspan="3"></td>
<td colspan="1">墩台号</td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">采用基准点</td>
<td colspan="6">控制桩坐标</td>
</tr>
<tr class="tr1">
<td colspan="1">测站</td>
<td colspan="1">后视基点</td>
<td colspan="1">点位</td>
<td colspan="1">X</td>
<td colspan="1">Y</td>
<td colspan="1">点位</td>
<td colspan="1">X</td>
<td colspan="1">Y</td>
</tr>
<tr>
<td colspan="1" rowspan="3">采用水准点</td>
<td colspan="1">编号</td>
<td colspan="3">标高（m）</td>
<td colspan="3">测量及平差说明:</td>
</tr>
<tr>
<td colspan="1"></td>
<td colspan="3"></td>
<td colspan="3" rowspan="2"></td>
</tr>
<tr>
<td colspan="1"></td>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="8" valign="top" align="left" style="position:relative">
图示:(详细注明控制桩及放样尺寸):
</td>
</tr>
<tr style="height:220px">
<td colspan="8" valign="top" align="left" style="position:relative"></td>
</tr>
<tr style="height:80px">
<td colspan="1" valign="top" align="left" style="position:relative">
备注:
</td>
<td colspan="7" valign="top" align="left" style="position:relative"></td>
</tr>
<tr style="height: 60px;border-bottom: 0;border-right: 0;">
<td> <span style="text-align:left">施工负责人:</span></td>
<td></td>
<td><span style="text-align:center">复核:</span></td>
<td></td>
<td><span style="text-align:center">记录:</span></td>
<td></td>
<td colspan="2" id="div1">
<input id="Date" type="text" style="100%" value=" 年 月 日">
<!--2020 年 03 月 17日-->
</td>
</tr>
</tbody>
</table>
</form>
<a id="output_table">导出Excel</a>
<input type="button" value="样式格式化" id="btn1" />
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script>
//https://blog.csdn.net/qq_42813491/article/details/89253326
// 将input元素等 转换为html 兼容导出样式
$("#btn1").click(function () {
$("#div1").html($("#Date").val());
});
$("#output_table").click(function () {
// 核心：拼接完整的html格式文档并填充数据
//使用outerHTML属性获取整个table元素的HTML代码， 包括根标签<table></table>
// 自定义封装html格式文档<html><head></head><body></body></html>
// 设置字符集，告诉浏览器以utf8方式解析，避免乱码<meta charset='utf-8'/>
// 获取table数据并填充到自定义的html格式文档中
var table_content = document.querySelector("#BridgeLofting").outerHTML;
var html = "<html><head><meta charset='utf-8' /></head><body>" + table_content + "</body></html>";
// 实例化一个Blob对象，
// param1：包含文件内容的数组，
// param2：包含文件类型属性的对象
var blob = new Blob([html], {
type: "application/vnd.ms-excel"
});
var output_table = document.querySelector("#output_table");
// 利用URL.createObjectURL()方法为a元素生成blob URL
output_table.href = URL.createObjectURL(blob);
// 设置文件名，低级浏览器不支持
output_table.download = "学生信息表.xls";
});
</script>
</body>
</html>