提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

JS导出网页所有内容为excel

JSExcel导出网页 内容 所有
2023-09-14 09:04:05 时间 
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<meta charset="utf-8" />
		<style>
			table {
				border-collapse: collapse;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 设置border="1"以显示表格框线 -->
			<table border="1">
				<!-- caption元素可以生成表标题，其单元格列跨度为表格的列数 -->
				<caption>商品清单</caption>
				<tr style="height:100px;">
					<th rowspan="2" style="width:100px;">序号</th>
					<th rowspan="2">商品编号</th>
					<th rowspan="2">分类</th>
					<th colspan="3">价格</th>
				</tr>
				<tr>
					<th>国产</th>
					<th>进口</th>
				</tr>
				<tr>
					<td>1</td>
					<td>201111</td>
					<td>手机</td>
					<td>2000</td>
					<td>5000</td>
				</tr>
				<tr>
					<td>2</td>
					<td>2021243</td>
					<td>电脑</td>
					<td>96000</td>
					<td>5000</td>
				</tr>
			</table>
			<a>导出excel</a>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el: "#app",
				data: function() {
					return {}
				},
				created() {
					// 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
					var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementsByTagName(
						"table")[0].outerHTML + "</body></html>";
					// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
					var blob = new Blob([html], {
						type: "application/vnd.ms-excel"
					});
					var a = document.getElementsByTagName("a")[0];
					// 利用URL.createObjectURL()方法为a元素生成blob URL
					a.href = URL.createObjectURL(blob);
					// 设置文件名
					a.download = "商品清单.xls";
				},
				methods: {}

			})
		</script>
	</body>
</html>

转载：https://blog.csdn.net/qq_32963841/article/details/122982621?spm=1001.2014.3001.5501
感谢分享

相关文章