jQuery插件將HTML表格導出為Excel格式文件 - tableexport.js插件3606
TableExport是一款可以將HTML表格導出為Excel xlsx格式、xls格式,以及csv和txt文件的jQuery插件。TableExport插件使用簡單,默認使用Bootstrap的CSS表格樣式,也支持普通的HTML表格。

安裝
可以通過bower或npm來安裝TableExport插件。
$ bower install tableexport.js
$ npm install tableexport    
使用方法 TableExport插件依賴于jQuery(1.2.1+),FileSaver.js。為了支持.xlsx(Office Open XML SpreadsheetML Format)格式,你必須在 FileSaver.js 和 TableExport.js文件之前引入xlsx-core.js文件。為了使舊的瀏覽器(Firefox < 20, Opera < 15, Safari < 6)支持.xlsx,需要在 FileSaver.js 文件之前引入 Blob.js文件。
<script src="jquery.min.js"></script>
<script src="xlsx-core.js"></script>
<script src="blob.js"></script>
<script src="filesaver.js"></script>
<script src="tableexport.js"></script>
CSS樣式 TableExport插件默認使用Bootstrap框架來制作表格和按鈕。如果你在項目中沒有使用Bootstrap,可以將參數bootstrap設置為false。
$("table").tableExport({
    bootstrap: false
});  
如果使用了Bootstrap,那么有4個可用的按鈕class類,它們分別為.xlsx, .xls, .csv 和 .txt的導出按鈕提供樣式。 初始化插件 在頁面DOM元素加載完畢之后,可以通過tableExport()方法來初始化該表格插件。
$("table").tableExport();
配置參數 TableExport插件的默認配置參數如下:
$("table").tableExport({
    headings: true, 
    footers: true, 
    formats: ["xls", "csv", "txt"],
    fileName: "id",
    bootstrap: true,
    position: "bottom",
    ignoreRows: null,
    ignoreCols: null
});        
eadings:是否在<thead>元素中顯示表格的頭部(th或td元素)。 footers:是否在<tfoot>元素中顯示表格的腳部(th或td元素)。 formats:導出的文件類型,會生成相應的導出按鈕。 fileName:下載的文件名稱。 bootstrap:是否使用bootstrap樣式的按鈕。 position:標題元素相對于表格的位置,可以是top或bottom。 ignoreRows:設置不被導出的表格行,可以是數值或一個數值數組。 ignoreCols:設置不被導出的表格列,可以是數值或一個數值數組。 按鈕設置 每一個按鈕都有一個自己的class類,和顯示的內容。如下:
$.fn.tableExport.xlsx = {
    defaultClass: "xlsx",
    buttonContent: "Export to xlsx",
    mimeType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    fileExtension: ".xlsx"
};
 
/* Excel Binary spreadsheet (.xls) */
$.fn.tableExport.xls = {
    defaultClass: "xls",
    buttonContent: "Export to xls",
    separator: "\t",
    mimeType: "application/vnd.ms-excel",
    fileExtension: ".xls"
};
 
/* Comma Separated Values (.csv) */
$.fn.tableExport.csv = {
    defaultClass: "csv",
    buttonContent: "Export to csv",
    separator: ",",
    mimeType: "application/csv",
    fileExtension: ".csv"
};
 
/* Plain Text (.txt) */
$.fn.tableExport.txt = {
    defaultClass: "txt",
    buttonContent: "Export to txt",
    separator: "  ",
    mimeType: "text/plain",
    fileExtension: ".txt"
};                  
下面是插件額外的默認值。
/* default charset encoding (UTF-8) */
$.fn.tableExport.charset = "charset=utf-8";
 
/* default filename if "id" attribute is set and undefined */
$.fn.tableExport.defaultFileName = "myDownload";
 
/* default class to style buttons when not using bootstrap  */
$.fn.tableExport.defaultButton = "button-default";
 
/* bootstrap classes used to style and position the export buttons */
$.fn.tableExport.bootstrap = ["btn", "btn-default", "btn-toolbar"];
 
/* row delimeter used in all filetypes */
$.fn.tableExport.rowDel = "\r\n";                  

技術討論區(26 個討論)

  1. ling 26

    ling @ 蝸牛喔低調

    請問您是怎么解決這種問題的?

    2019-5-13 14:33:54 | 回復

  2. 如果 25

    如果

    如果表格里有圖片能導出來嗎

    2018-7-20 17:24:16 | 回復

  3. 只為你 24

    只為你

    怎樣將單元格列寬自適應啊

    2018-6-15 15:34:49 | 回復

  4. 娃哈哈 23

    娃哈哈

    自定義下載按鈕應該怎么搞呢?

    2018-6-14 18:02:48 | 回復

  5. 累了倦了懂了 22

    累了倦了懂了

    動態生成的下載不了

    2018-4-27 16:36:29 | 回復

  6. 蝸牛喔低調 21

    蝸牛喔低調

    請問我通過按鈕來觸發導出,為什么避不開觸發自帶的按鈕呢? 例如:我寫一個Button來導出,點擊這個按鈕時,這個自帶的插件就出來了還要觸發相應的導出才能執行導出。請問各位大神,怎么才能通過自己寫的按鈕一鍵觸發導出呢?

    2018-1-19 16:30:22 | 回復

  7. ベ獨自欣賞美 20

    ベ獨自欣賞美

    你好問下 能導出table中input標簽的值嗎

    2017-6-13 9:06:51 | 回復

  8.  F。 Daisy 19

    F。 Daisy

    謝謝您分享,非常感謝

    2017-5-3 15:51:23 | 回復

  9. 秋色楓林里的微笑 18

    秋色楓林里的微笑

    為什么 沒有合并單元格??????????????

    2017-3-1 15:01:18 | 回復

  10. 聽⒈半的曲ゝ 17

    聽⒈半的曲ゝ

    分頁的表格怎么導出后面幾頁的,不可能每個頁面導出一次吧

    2017-2-17 17:08:51 | 回復

  11. 更多討論
  12. 請先登錄

      發 布
qq游戏麻雀 股票基金净值 pk10计划软件 真人二人麻将游戏 2000字万科股票分析 旺能环境股票最新消息 正规的投资理财平台 上证指数吧东方财富网手机版 网上不能炒 理财平台哪个好靠谱 当前上证指数 比亚迪股票行情 闪牛配资 华融配资 陕西丫丫麻将 腾讯血流成河麻将规则 不收费的游戏麻将