去年与同事一起做一个小任务，需要把HTML表格中的数据导出到Excel。用原生js想要实现，只有IE浏览器提供导出到微软的Excel的接口，这就要求你电脑上必须安装IE浏览器、Excel，而且必须修改IE浏览器的默认设置，这让电脑上没安装IE浏览器与不喜欢用IE浏览器的人情何以堪。今天我向大家介绍DataTables插件，它是基于jQuery的，它可以兼容所有主流浏览器。

　　DataTables插件有很多配件，如AutoFill、ColReorder等，想要导出Excel表格必须的配件就是TableTools。网上也有很多介绍DataTables的，可是基本上是对DataTables官方教程的翻译，并没有告诉你该怎么引入这个插件。今天的这篇文章就是介绍怎么引入这个插件的。

　　先到官网http://www.datatables.net/下载插件，最新版本是DataTables-1.9.4。解压文件得到DataTables-1.9.4文件夹，打开文件夹你会发现里面有很多的文件，其实要用到的只是其中一些。下面介绍怎么引入这些文件。

一、首先在<head>标签中引入下面的样式表。

<style>

    @import "DataTables-1.9.4/media/css/demo_page.css";

    @import "DataTables-1.9.4/media/css/demo_table.css";

    @import "DataTables-1.9.4/media/css/demo_table_jui.css";

    @import "DataTables-1.9.4/extras/TableTools/media/css/TableTools.css";

    @import "DataTables-1.9.4/extras/TableTools/media/css/TableTools_JUI.css";

</style>

二、在</body>标签前面(这个是个人习惯，你也可以不放在这边)引入下面的javascript。

<script src="DataTables-1.9.4/media/js/jquery.js"></script>

<script src="DataTables-1.9.4/media/js/jquery.dataTables.js"></script>

<script src="DataTables-1.9.4/extras/TableTools/media/js/TableTools.min.js"></script>

　　引入这些文件是一个难点，因为DataTables-1.9.4文件夹中的文件很多，不知道该引入哪些，这是写这篇文章的主要目的。

　　再讲一下怎样调用接口。DataTables是通过$("#" + id).dataTable()接口来调用的，其中id是table中的id属性值。下面是我调用接口的代码：

toExcel: function (id) {

        $("#" + id).dataTable({

            "bJQueryUI": false,

            'bPaginate': false, //是否分页

            "bRetrieve": false, //是否允许从新生成表格

            "bInfo": false, //显示表格的相关信息

            "bDestroy": true,

            "bServerSide": false,

            "bProcessing": true, //当处理大量数据时，显示进度，进度条等

            "bFilter": false, //搜索框

            "bLengthChange": false, //动态指定分页后每页显示的记录数

            "bSort": false, //排序

            "bStateSave": false, //缓存

            "sAjaxDataProp": "data",

            "sDom": 'T<"clear">lfrtip'

            "oTableTools": {

                "sSwfPath": "DataTables-1.9.4/extras/TableTools/media/swf/copy_csv_xls_pdf.swf"

            }

        } );

    }

　　首先得在html<table>标签中加上一个id属性，然后把id值传给上面这个函数(这个封装函数可以自己写)，最后再调用这个函数就可以了。想知道函数的各个属性是什么意思，可以阅读http://www.cnblogs.com/nier/archive/2012/03/18/2404836.html，里面有所有属性的介绍。

　　这是我所做任务的效果图：

　　

　　图片上方有一排按钮，下方是从服务器获取的数据表格。点击图片上方的Copy可以复制表格内容，点击CSV、Excel生成的都是csv格式的文件，可以用Excel或wps打开，点击PDF生成pdf文件，点击Print会在网页上打印出表格内容。

　　这篇文章就写到这边了，希望这篇文章能帮助到一些想把html表格数据导出到Excel的朋友。

使用DataTables导出html表格的更多相关文章

  1. PHP导入导出excel表格图片(转)

    写excel的时候,我用过pear的库,也用过pack压包的头,同样那些利用smarty等作的简单替换xml的也用过,csv的就更不用谈了.呵呵.(COM方式不讲了,这种可读的太多了,我也写过利用wp ...

  2. java中使用jxl导出Excel表格详细通用步骤

    该方法一般接收两个参数,response和要导出的表格内容的list. 一般我们将数据库的数据查询出来在页面进行展示,根据用户需求,可能需要对页面数据进行导出. 此时只要将展示之前查询所得的数据放入s ...

  3. ITextSharp导出PDF表格和图片（C#）

    文章主要介绍使用ITextSharp导出PDF表格和图片的简单操作说明,以下为ITextSharp.dll下载链接 分享链接:http://pan.baidu.com/s/1nuc6glj 密码:3g ...

  4. .NET环境下导出Excel表格的两种方式和导入两种类型的Excel表格

    一.导出Excel表格的两种方式,其中两种方式指的是导出XML数据类型的Excel(即保存的时候可以只需要修改扩展名为.xls)和真正的Excel这两种. using System; using Sy ...

  5. php：PHPExcel导出excel表格

    一.动态生成的内容如何能当成文件来下载呢? 方法:1.将Content-Type设置成application/octet-stream就可以了,即[header('Content-Type: appl ...

  6. java导出excel表格

    java导出excel表格: 1.导入jar包 <dependency> <groupId>org.apache.poi</groupId> <artifac ...

  7. PowerDesiger 15逆向生成工程E-R图及导出word表格

    应用环境:win8(64位)+oracle10g(32位)服务端+PowerDesigner15 需求:oracle数据库中的表结构是web工程框架hibernate 自动生成,现需要将数据库中已有的 ...

  8. Jquery ajax请求导出Excel表格

    直接贴代码吧 $("#btn-export").click(function(){ var exportExcel = "export_excel"; data ...

  9. QTableWidget 导出到表格

    跳槽到了新的公司.開始苦逼的出差现场开发.接触到了新的应用.有非常多应用须要将Table导出成表格,能够把table导出成csv格式的文件. 跟大伙分享一下: lass TableToExcle : ...

随机推荐

  1. 『ACM C++』HDU杭电OJ | 1418 - 抱歉 （拓扑学：多面体欧拉定理引申）

    呕,大一下学期的第一周结束啦,一周过的挺快也挺多出乎意料的事情的~ 随之而来各种各样的任务也来了,嘛毕竟是大学嘛,有点上进心的人多多少少都会接到不少任务的,忙也正常啦~端正心态 开心面对就好啦~ 今天 ...

  2. MYSQL 8.0.11 安装过程及 Navicat 链接时遇到的问题

    参考博客:https://blog.csdn.net/WinstonLau/article/details/78666423 我的系统和软件版本是这样的: 系统环境:win7.64位 MySQL版本: ...

  3. jQuery中的easyui

    一,easyui---datagrid绑定数据的简单测试: 1.数据库中的UserInfo表及数据测试: 2.DAL层: //分页,模糊查询(pageNum-1)*pageSize+1----从第几条 ...

  4. vi模式下的编辑、删除、保存和退出

    vi + 文件名:进入 vi 模式 编辑模式:shift+: 退出编辑模式:Esc 退出编辑模式后可进行光标的上下左右移动(偶尔会出现ABCD,还不知道怎么解决,目前只能出来一个删除一个) 光标处:按 ...

  5. HBase学习（一）：认识HBase

    一.大数据发展背景 现今是数据飞速膨胀的大数据时代,大数据强调3V特征,即Volume(量级).Varity(种类)和Velocity(速度). ·Volume(量级):TB到ZB. ·Varity( ...

  6. java 异常与捕获

    几乎所有的代码里面都会出现异常,为了保证程序在出现异常之后可以正常执行完毕,就需要进行异常处理. 先来看一下异常的继承类结构: 所有的异常都是由Throwable继承而来,我们来看他下面的两个子类Er ...

  7. Hibernate学习笔记三

    1.1.1 Hibernate的关联关系映射:(多对多) 1.1.1.1 多对多的配置: 步骤一创建实体和映射: Student: public class Student { private Int ...

  8. Mave环境搭建SSM集成空项目

    ---恢复内容开始--- 一.空项目案例 软件: 链接:https://pan.baidu.com/s/18Fk8frnWMBRho43P98C97w 提取码:0rk7 项目:链接:https://p ...

  9. Mybatis之关联查询及动态SQL

    前言 实际开发项目中,很少是针对单表操作,基本都会联查多表进行操作,尤其是出一些报表的内容.此时,就可以使用Mybatis的关联查询还有动态SQL.前几篇文章已经介绍过了怎么调用及相关内容,因此这里只 ...

  10. VIO 初始化小结 - 10.17

    最近几个月忙于博士毕业,找工作一直没有继续更新博客,希望以这一篇开始,每个月能够继续有几篇总结博客. 首先review一下比较著名的vio系统 Tightly coupled EKF: mainly ...