js导出Excel

置顶爱是永恒2023

已于 2022-11-24 10:51:09 修改

阅读量654

点赞数 1

分类专栏： js导出Excel 文章标签： javascript excel html

于 2020-08-04 15:01:44 首次发布

本文链接：https://blog.csdn.net/weixin_46942018/article/details/107786837

版权

1 篇文章 0 订阅

订阅专栏

js实现Excel导出功能，兼容多浏览器（需要引用js库文件：jquery.min.js、xlsx插件js：xlsx.core.min.js）
代码截图
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS读取和导出excel示例</title>
<meta name="description" content="使用sheetjs读取和导出excel示例">
<script src="jquery.min.js"></script>
<script src="xlsx.core.min.js"></script>
<style type="text/css">
table {
border-collapse: collapse;
background: #c3dde0;
border: 1px solid black;
}
td, th {
border: 1px solid #ccc;
padding: 0 10px;
height: 30px;
line-height: 30px;
}
tbody tr:nth-child(odd) {
background: #d4e3e5;
}
body {
background: #f4f4f4;
margin: 10px;
}
</style>
<script type="text/javascript">
function downExcel(down_id) {
var elt = document.getElementById(down_id);
var wb = XLSX.utils.table_to_book(elt, { sheet: "sheet1", raw: true });
return XLSX.writeFile(wb, '用户管理.xlsx');
}
</script>
</head>
<body>
<table id="exportTable">
<tr>
<th>编号</th>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>成绩</th>
</tr>
<tr>
<td>1</td>
<td>2016001</td>
<td>张三</td>
<td>女</td>
<td>20</td>
<td>85</td>
</tr>
<tr>
<td>2</td>
<td>2016002</td>
<td>李四</td>
<td>男</td>
<td>22</td>
<td>90</td>
</tr>
<tr>
<td>3</td>
<td>2016003</td>
<td>赵六</td>
<td>男</td>
<td>26</td>
<td>95</td>
</tr>
</table>
<input type="button" value="导出Excel" οnclick="downExcel('exportTable')" style="margin-top:30px;" />
</body>
</html>
效果截图

关注