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插件的默认配置参数如下:
/* Defaults */ $( "table" ).tableExport({ headings: true , footers: true , formats: [ "xls" , "csv" , "txt" ], fileName: "id" , bootstrap: true , position: "bottom" , ignoreRows: null , ignoreCols: null }); |
headings
:是否在<thead>
元素中显示表格的头部(th或td元素)。footers
:是否在<tfoot>
元素中显示表格的脚部(th或td元素)。formats
:导出的文件类型,会生成相应的导出按钮。fileName
:下载的文件名称。bootstrap
:是否使用bootstrap样式的按钮。position
:标题元素相对于表格的位置,可以是top或bottom。ignoreRows
:设置不被导出的表格行,可以是数值或一个数值数组。ignoreCols
:设置不被导出的表格列,可以是数值或一个数值数组。
按钮设置
每一个按钮都有一个自己的class类,和显示的内容。如下:
/* default class, content, and separator for each export type */ /* Excel Open XML spreadsheet (.xlsx) */ $.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" ; |
TableExport插件的github地址为:https://github.com/clarketm/TableExport