原生js使用new Blob()实现带格式导出excel

最新推荐文章于 2025-03-31 13:01:39 发布

九段刀客

最新推荐文章于 2025-03-31 13:01:39 发布

阅读量1.6w

点赞数 3

分类专栏： js 文章标签： excel new Blob()

本文链接：https://blog.csdn.net/weixin_35958891/article/details/103381012

版权

js 专栏收录该内容

56 篇文章

订阅专栏

导出效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table id="table" border="1">
		<tr style="height:50px;">
			<th style="width:100px;color:red;">姓名</th>
			<th>性别</th>
			<th>年龄</th>
		</tr>
		<tr>
			<td>小明</td>
			<td>男</td>
			<td>16</td>
		</tr>
		<tr>
			<td>小红</td>
			<td>女</td>
			<td>17</td>
		</tr>
		<tr>
			<td>小张</td>
			<td>男</td>
			<td>17</td>
		</tr>
	</table>
	<a id="down">点击下载excel</a>
	<script>
		let html = `<!DOCTYPE html>
			<html lang="en">
			<head>
				<meta charset="UTF-8">
			</head>
			<body>
				${document.getElementById('table').outerHTML}
			</body>
			</html>`
		let blob = new Blob([html],{ type: 'application/vnd.ms-excel'});
		let a = document.getElementById('down');
		a.href = URL.createObjectURL(blob);
		a.download = '测试excel下载'
	</script>
</body>
</html>