去年與同事一起做一個小任務，需要把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的朋友。