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

导出效果

在这里插入图片描述

代码

<!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>

注意事项

  • 只能写行内样式
  • 有一部分css无效,目前我发现无效的有flex、margin,尽量使用最普通最老的css写法,不要使用css3的样式,用&nbsp;来代替需要margin的地方;
  • 因为有些样式不支持,导出的excel和你写出来的界面是不会完全一致的,要打印出来测试
  • 如果在vue中使用建议不要使用document.getElementB…来获取dom,应该直接使用ref来获取。
发布了96 篇原创文章 · 获赞 15 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_35958891/article/details/103381012
今日推荐