HTML表格导出为Excel|csv|txt文件的jQuery插件

PetitQ 表单/表格 2018-11-09 2.45K 0 0

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

使用方法:

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：是否在

元素中显示表格的头部（th 或 td 元素）

footers：是否在

元素中显示表格的脚部（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

HTML 表格导出为 Excel|csv|txt 文件的 jQuery 插件

已有 614 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

表单/表格

HTML表格导出为Excel|csv|txt文件的jQuery插件

使用方法:

CSS 样式:

初始化插件:

配置参数:

按钮设置:

HTML 表格导出为 Excel|csv|txt 文件的 jQuery 插件

相关文章

显示隐藏和复制表单密码字段jQuery插件

Bootstrap样式文件上传jquery插件

带自动提示功能的jQuery标签输入插件

发表回复取消回复

热销模板

表单/表格

使用方法:

CSS 样式:

初始化插件:

配置参数:

按钮设置:

HTML 表格导出为 Excel|csv|txt 文件的 jQuery 插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复