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";                  
      立即下载 ( 文件大小:2.67 M)

    浏览器兼容性

    1. IE 9
    2. Mozilla Firefox
    3. Google Chrome
    4. Oper
    5. Safari

    技术讨论区

    1. 蜗牛喔低调21

      蜗牛喔低调

      请问我通过按钮来触发导出,为什么避不开触发自带的按钮呢? 例如:我写一个Button来导出,点击这个按钮时,这个自带的插件就出来了还要触发相应的导出才能执行导出。请问各位大神,怎么才能通过自己写的按钮一键触发导出呢?

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

    2. ベ独自欣赏美20

      ベ独自欣赏美

      你好问下 能导出table中input标签的值吗

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

    3.  F。 Daisy 19

      F。 Daisy

      谢谢您分享,非常感谢

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

    4. 秋色枫林里的微笑18

      秋色枫林里的微笑

      为什么 没有合并单元格??????????????

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

    5. 听⒈半的曲ゝ17

      听⒈半的曲ゝ

      分页的表格怎么导出后面几页的,不可能每个页面导出一次吧

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

    6. 走走停停16

      走走停停

      能否自动导入

      2017-1-19 10:38:40| 回复

    7. Tensen15

      Tensen

      导出中文乱码

      2016-12-27 16:09:55| 回复

    8. 努力ing14

      努力ing

      不显示列名,是怎么回事?

      2016-12-26 11:08:04| 回复

    9. 银翼天使13

      银翼天使

      保存成*.xls文件中文乱码,怎么解决

      2016-12-22 16:14:28| 回复

    10. 我是大魔鬼12

      我是大魔鬼 @惋、若心笙

      用jquery设置css能更改按钮位置,比如 $("button").css("margin-left","50%");

      2016-12-15 0:11:16| 回复

    11. 更多讨论
    12. 请先登录

        发 布

    键盘快捷键: 上一个 下一个