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

情境

        由于项目需要,要求导出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>

结果

完整项目和代码:https://download.csdn.net/download/qq_41315539/10988930

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值