<!DOCTYPE html>
<html>
<head>
<title>example.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<body>
<div id="table_wrapper">
<table bordercolor="black" class="tableA">
<tr class="title">
<th colspan="4" style="color: red">员工薪资表</th>
</tr>
<tr>
<th>姓名</th>
<th>基本</th>
<th>绩效</th>
<th>住贴</th>
<th>合计</th>
</tr>
<tr>
<td>杨丽</td>
<td>3000</td>
<td>500</td>
<td>300</td>
<td>3800</td>
</tr>
<tr>
<td>汪洋</td>
<td>3000</td>
<td>600</td>
<td>300</td>
<td>3900</td>
</tr>
<tr>
<td>刘栋</td>
<td>6000</td>
<td>500</td>
<td>500</td>
<td>7000</td>
</tr>
<tr class="footer">
<td colspan="4">总人数：3人</td>
</tr>
</table>
</div>
<a id="down-file" href="#">点击下载文件</a>
</body>
<script type="text/javascript">
window.onload = function () {
var oTable = document.getElementById("table_wrapper").innerHTML;
var excelHtml = `
<html>
<head>
<meta charset='utf-8' />
<style>
.tableA {
border-collapse: collapse;
}
.tableA .title th{
height: 50px;
font-size: 24px;
font-family: '微软雅黑';
font-weight: 700;
}
.tableA tr th {
border: 1px #000 solid;
height: 40px;
background: #efefef;
}
.tableA tr td {
padding: 0 40px;
border: 1px #000 solid;
height: 40px;
text-align: center;
}
.tableA .footer td {
font-size: 20px;
font-weight: 700;
}
</style>
</head>
<body>` +
oTable +
`</body>
</html>
`;
// 创建 Blob 对象
var excelBlob = new Blob([excelHtml], {
type: "application/vnd.ms-excel"
});
var oA = document.getElementById("down-file");
// 会产生一个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的 URL 字符串
// 这里 URL.createObjectURL(excelBlob) 会创建一个URL 的 Blob 对象
oA.href = URL.createObjectURL(excelBlob);
oA.download = "test.xls";
oA.click = function () {
this.click();
};
};
</script>
</head>
</html>