将页面表格导出xls格式的Excel文件

最新推荐文章于 2022-08-22 16:11:37 发布

原创最新推荐文章于 2022-08-22 16:11:37 发布 · 495 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#导出 #exel

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种将网页上的动态生成表格导出到Excel的方法，该方法能够保留表格的原始样式，并通过JavaScript实现自动下载功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>

    <a id="download1" style="font-size:14pt">导出表格</a>
    //div 为动态生成表格的位置
    <div id="dataTable">
    </div>

	<script>
        var a = document.getElementsByTagName("a")[0];
		a.onclick=function(){
		 // 使用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" });
        // 利用URL.createObjectURL()方法为a元素生成blob URL
		
        a.href = URL.createObjectURL(blob);
        // 设置文件名
        a.download = "调查结果表.xls";
		}
	</script>
</body>

这种导出的好处是可以将表格的style样式保存下来显示在exel里面