tableExport.js 前端直接导出Excel表格

最新推荐文章于 2024-08-23 18:00:00 发布

qq_41315539

最新推荐文章于 2024-08-23 18:00:00 发布

阅读量3.8k

点赞数 1

分类专栏： JS 文章标签：导出Excel tableExport.js

本文链接：https://blog.csdn.net/qq_41315539/article/details/88062631

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

情境

由于项目需要，要求导出excel表格，具体描述，从前端table标签中直接将数据导出成Excel表格。

1、使用的jqGrid表格插件，可以导出筛选查询后的表格内容成Excel。

2、直接用table标签，进行测试，可以把table标签内的数据导出成Excel。

准备

1、tableExport.js（这是修改过后的压缩包，官网下载的存现问题）

链接：https://pan.baidu.com/s/1fmEXF_8Bt4xqNz2QBFKUjg
提取码：c2bh

2、FileSaver.js

链接：https://pan.baidu.com/s/1AwOG7F2lV03peMu-h74rJw
提取码：ufuh

3、jquery.js

链接：https://pan.baidu.com/s/1iNvpyr6Ly4M6I5KCk5KFEA
提取码：alpf

下载路径:

注意：不支持IE浏览器（划重点）

代码

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	
	<!-- 这个是所有jquery插件的基础，首先第一个引入 -->
		<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
	<!-- 表格导出成excel、json、xml  等  -->
        <!-- jquery Plugin（jquery插件添加）-->
        <script type="text/javascript" src="tableExport.jquery.plugin-master/tableExport.js"></script>
        <script type="text/javascript" src="tableExport.jquery.plugin-master/jquery.base64.js"></script>
        <!-- jquery Plugin（jquery插件添加）-->
        <script type="text/javascript" src="tableExport.jquery.plugin-master/html2canvas.js"></script>
    	<!-- PDF Export（导出PDF需要添加插件）-->
         <script type="text/javascript" src="tableExport.jquery.plugin-master/jspdf/libs/sprintf.js"></script>
         <script type="text/javascript" src="tableExport.jquery.plugin-master/jspdf/jspdf.js"></script>
         <script type="text/javascript" src="tableExport.jquery.plugin-master/jspdf/libs/base64.js"></script>
        <!-- Excel Export（导出Excel需要添加插件）-->
        
        <script type="text/javascript"src="FileSaver.js-master/dist/FileSaver.min.js"></script><!--bootStrap中的js-->
	
	
	<body>
		<button  type="button"  onclick="exportExcel()">导出excel</button>
		<table id="table_1" border="1px">
			<tr>
				<td>姓名</td>
				<td>年龄</td>
				<td>爱好</td>
			</tr>
			<tr>
				<td>zhangSan</td>
				<td>10</td>
				<td>study</td>
			</tr>
			<tr>
				<td>里斯</td>
				<td>15</td>
				<td>写代码</td>
			</tr>
		</table>
	</body>
	<script type="text/javascript">
		function exportExcel(){
			 $('#table_1').tableExport(
			 	{
			 		type:'excel',
			 		fileName: new Date().getTime(),
			 		escape:'false'
			 		}
			 	
			 );
		}
		
		
	</script>
</html>