jQuery插件将HTML表格导出为Excel格式文件 - tableexport.js插件

TableExport是一款可以将HTML表格导出为Excel xlsx格式、xls格式，以及csv和txt文件的jQuery插件。TableExport插件使用简单，默认使用Bootstrap的CSS表格样式，也支持普通的HTML表格。

安装
可以通过bower或npm来安装TableExport插件。
1
2
$ 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文件。
1
2
3
4
5
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="xlsx-core.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="blob.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="filesaver.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="tableexport.js"></script>

CSS样式

TableExport插件默认使用Bootstrap框架来制作表格和按钮。如果你在项目中没有使用Bootstrap，可以将参数bootstrap设置为false。
1
2
3
$("table").tableExport({
bootstrap: false
});
如果使用了Bootstrap，那么有4个可用的按钮class类，它们分别为.xlsx, .xls, .csv 和 .txt的导出按钮提供样式。

初始化插件

在页面DOM元素加载完毕之后，可以通过tableExport()方法来初始化该表格插件。
1
$("table").tableExport();

配置参数
TableExport插件的默认配置参数如下：
1
2
3
4
5
6
7
8
9
10
$("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类，和显示的内容。如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$.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"
};
下面是插件额外的默认值。