表格-可将HTML表格导出为EXCEL|CSV|TXT文件的jQuery插件

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

在线预览 网盘下载

郑重声明:

1 本资源来源于互联网,资源的版权归资源原作者所持有,受《中华人民共和国著作权法》等相关法律保护。

2 由于无法和原作者取得联系,所以上传的部分资源无法先通过原作者的同意就分享给大家了,如本资源侵犯了您(原作者)的权益,请联系我们(微信号 xiaohaimei1989),我们会立马删除您的资源,并向您表达诚挚的歉意!

3 本站是一个公益型网站,分享资源的目的在于传播知识,分享知识,收取一点点打赏的辛苦费是用于网站的日常运营开支,并非用于商业用途。

4 本站资源只提供学习和参考研究使用,使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。

发表评论