将页面导出为excel或者word

最新推荐文章于 2024-09-06 22:33:10 发布

贝塔贝卡贝

最新推荐文章于 2024-09-06 22:33:10 发布

阅读量254

点赞数

CC 4.0 BY-SA版权

文章标签： javascript jquery

本文链接：https://blog.youkuaiyun.com/Kiruthika/article/details/109063074

这篇博客介绍了如何使用JavaScript将HTML表格和页面内容导出为Excel及Word文件。通过创建Blob对象和利用URL.createObjectURL()方法，可以实现点击按钮后下载文件的功能。示例中展示了导出table表格以及纯文本页面内容到Excel的实现方法。

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

一、将table列表导出为Excel或者word

<table id="tableList" border="1">
	<thead>
		<tr>
			<td>姓名</td>
			<td>体重</td>
			<td>爱好</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>张三</td>
			<td>60kg</td>
			<td>打球</td>
		</tr>
	</tbody>
</table>

<a href="" id="download">导出table文件</a>

<script src="./libs/jquery/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// tableId第一个参数是table元素id  
	// aid 第二个参数是a标签("导出")的id 
	// fileName 第三个参数是导出下载文件名
	function exportTable(tableId,aid,fileName){
		// 使用outerHTML属性获取整个table元素的HTML代码	    （包括table标签），然后包装成一个完整的HTML文档
		var html = document.getElementById(tableId).outerHTML;
		
		// 实例化一个Blob对象，其构造函数的参数是包含文件内容的数组
		var blob = new Blob([html]);
		
		// 获取a标签id
		var aid = document.getElementById(aid);
		
		// 利用URL.createObjectURL()方法为a元素生成blob URL;
		aid.href = URL.createObjectURL(blob);
		
		// 设置导出下载的文件名
		aid.download = fileName;
	}
	
	$("#download").click(function(){
		//将table表格导出为Excel，Excel表要想显示边框，需要在table标签上加上属性为border="1"
		exportTable('tableList','download','file.xls')
		//将table表格导出为word
		// exportTable('fileText','download','file.doc')
	})
</script>

二、将页面导出为excel或者word

<div>
	<p id="fileText">我爱你，我的家</p>
	<a href="" id="download">导出文件</a>
</div>

<script src="./libs/jquery/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// tableId第一个参数是table元素id  
	// aid 第二个参数是a标签("导出")的id 
	// fileName 第三个参数是导出下载文件名
	function exportTable(contentId,aid,fileName){
		// 使用outerText属性获取整个页面元素的文本内容
		var text = document.getElementById(contentId).outerText;
		
		// 实例化一个Blob对象，其构造函数的参数是包含文件内容的数组
		var blob = new Blob([text]);
		
		// 获取a标签id
		var aid = document.getElementById(aid);
		
		// 利用URL.createObjectURL()方法为a元素生成blob URL;
		aid.href = URL.createObjectURL(blob);
		
		// 设置导出下载的文件名
		aid.download = fileName;
	}
	
	$("#download").click(function(){
		exportTable('fileText','download','file.xls')
		// exportTable('fileText','download','file.doc')
	})
</script>