tableExport的快速上手及快速使用

最新推荐文章于 2024-08-10 15:49:03 发布

David宫洪深

最新推荐文章于 2024-08-10 15:49:03 发布

阅读量3.4k

点赞数 2

分类专栏：前端框架和插件及方法

本文链接：https://blog.csdn.net/qq_36020545/article/details/52403621

版权

前端框架和插件及方法专栏收录该内容

10 篇文章 0 订阅

订阅专栏

今天有个项目是让我们这边写个Demo 主要实现的就是把数据从前台页面实现导出成word或者PDF等模式 ,网上有很多的资料但是都不是很全,这边自己去尝试的自己写了一下,但是过于的麻烦,在网上有人推荐使用TableExport这个前台的js插件来实现,我是在网上看到由于源代码的问题,在中文上支持不足,传出的的时候会产生乱码,在网上学习了一下,并自己试验了一下,废话不多说直接上代码.(我这边用的IDE是Eclipse 前台这些需要自己加如Tomcat插件这些可以在网上搜下,具体的代码格式如下)

首先是我们这边需要加入的JS插件及加载的JS文件:(在我的资源中都有可直接拿过来使用全部都是改好的)

-----------------------------------------------------------JS------------------------------------------------------------------------------------------------

<script src="js/jquery.min.js"></script>
<script src="js/tableExportAlter.js"></script>

<script src="js/jquery.base64.js"></script>

<script src="js/jspdf/jspdf.js"></script> 
<script src="js/mybase64.js"></script> <!--这个js解决中文乱码问题 ->
<script>

-----------------------------------------------------------JS结束------------------------------------------------------------------------------------------------

好的让我们继续这里介绍两个重要的JS 分别是 mybase64这个还有tableExportAlter.js这个原先的叫做tableExport.js 但是里面有些方法不能很好的支持中文等等 (由于字符处理太多我就不放上来了大家可以自己去下载)是解决乱码的具体代码如下如果不想copy我的资源中有不需要积分可直接下载资源

具体测试代码如下,大家可以根据自己的格式改动或者把数据导入页面进行导出测试

-----------------------------------------------------------JS------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div>
<ul class="dropdown-menu">
<li>
<a onClick="$('#stats_datatable').tableExport({type:'csv',escape:'false',filename:'(2016-02-29_2016-03-06)'});" href="#">
CSV
</a>
</li>
<li>
<a onClick="$('#stats_datatable').tableExport({type:'txt',escape:'false',filename:'(2016-02-29_2016-03-06)'});" href="#">
TXT
</a>
</li>
<li class="divider"></li>
<li>
<a onClick="$('#stats_datatable').tableExport({type:'excel',escape:'false',filename:'(2016-02-29_2016-03-06)'});" href="#">
Excel
</a>
</li>
<li>
<a onClick="$('#stats_datatable').tableExport({type:'doc',escape:'false',filename:'(2016-02-29_2016-03-06)'});" href="#">
Word
</a>
</li>
<li>
<a onClick="$('#stats_datatable').tableExport({type:'png',escape:'false',filename:'(2016-02-29_2016-03-06)'});" href="#">
PNG
</a>
</li>
</ul>
</div>

<div class="panel-body">
<table id="stats_datatable" class="table datatable">
<thead>
<tr>
<th>名称</th>
<th>里程</th>
<th>次数</th>
<th>天数</th>
<th>签到</th>
<th>活动</th>
<th>时间周期</th>
<th>更新时间</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

</div>


<script src="js/jquery.min.js"></script>
<script src="js/tableExportAlter.js"></script>
<script src="js/jquery.base64.js"></script>
<script src="js/jspdf.js"></script>
<script src="js/mybase64.js"></script>

<script>
$(function(){
//=======让解码后中文不出现乱码的方法
data = $.base64({data:"已经编码过后的base64",type:1,unicode:true});

//=或
data = $.base64({data:"已经编码过后的base64",type:1});
});
</script>
</body>
</html>

-----------------------------------------------------------JS结束------------------------------------------------------------------------------------------------

(在此特别鸣谢嘘寒问暖的博文感谢他的分享详细地址 )

然后感谢网络上那些前辈大牛们的分享谢谢