intelogie/tableexport

该包的最新版本(dev-master)没有可用的许可证信息。

安装: 235

依赖者: 0

建议者: 0

安全: 0

星标: 0

关注者: 2

分支: 291

语言:JavaScript

dev-master 2016-07-01 03:25 UTC

This package is auto-updated.

Last update: 2024-09-21 19:47:34 UTC


README

Build Status

TableExport

简单易实现的插件,可以将HTML表格导出为xlsx、xls、csv和txt文件

入门指南

下载和设置

要使用此插件,请在上一个HTML文档的<body>标签之前包含jQuery库、FileSaver.js脚本和TableExport.js插件

<script src="jquery.js"></script>
<script src="filesaver.js"></script>
 ...
<script src="tableexport.js"></script>

使用Bower安装

$ bower install tableexport.js

使用npm安装

$ npm install tableexport

CDNjs

依赖

必需
可选/主题
附加组件

为了提供对 Office Open XML SpreadsheetML格式 (.xlsx) 的支持,您必须在FileSaver.jsTableExport.js之前将以下第三方脚本包含到您的项目中。

<script src="xlsx-core.js"></script>
<script src="filesaver.js"></script>
 ...
<script src="tableexport.js"></script>

为了支持旧浏览器(Firefox<20、Opera<15、Safari<6),还必须在Blob.js之前包含FileSaver.js脚本。

<script src="xlsx-core.js"></script>
<script src="blob.js"></script>
<script src="filesaver.js"></script>
 ...
<script src="tableexport.js"></script>

使用方法

CSS

默认情况下,TableExport.js利用Bootstrap CSS框架提供增强的表格和按钮样式。对于非Bootstrap项目,将bootstrap属性设置为false进行初始化。

$("table").tableExport({
    bootstrap: false
});

当与Bootstrap一起使用时,有四个自定义类 .xlsx、.xls、.csv、.txt,为每种可导出文件类型提供按钮样式。

JavaScript

要使用导出插件,只需调用

$("table").tableExport();

可以通过传递其他属性来自定义表格、按钮和导出数据的样式和感觉。

注意:默认情况下,TableExport将为三种不同的文件类型创建导出按钮 xls、csv、txt。您可以通过将formats属性设置为所选文件类型来选择要生成的按钮。

/* Defaults */
$("table").tableExport({
    headings: true,                     // (Boolean), display table headings (th/td elements) in the <thead>
    footers: true,                      // (Boolean), display table footers (th/td elements) in the <tfoot>
    formats: ["xls", "csv", "txt"],     // (String[]), filetype(s) for the export
    fileName: "id",                     // (id, String), filename for the downloaded file
    bootstrap: true,                    // (Boolean), style buttons using bootstrap
    position: "bottom",                 // (top, bottom), position of the caption element relative to table
    ignoreRows: null,                   // (Number, Number[]), row indices to exclude from the exported file
    ignoreCols: null,                   // (Number, Number[]), column indices to exclude from the exported file
    ignoreCSS: ".tableexport-ignore"    // (selector, selector[]), selector(s) to exclude from the exported file
});

注意:要使用xlsx文件类型,您必须包含依赖部分中列出的第三方脚本。

TableExport支持创建后控制它的额外方法(updateresetremove)。

/* Run plugin and save it to a variable */
var tables = $("table").tableExport();
/* update */
tables.update({
    filename: "newFile"     // pass in a new set of properties
});

/* reset */
tables.reset();             // useful for a dynamically altered table

/* remove */
tables.remove();            // removes caption and buttons

属性

有关可用属性及其用法的表格,请在此处查看

www.clarketravis.com/tableexport

方法

有关可用方法和其用法的表格,请在此处查看

www.clarketravis.com/tableexport

设置

每个按钮都分配了一个基于其各自文件类型和相应CSS样式的默认类和默认内容。

/* 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";

浏览器支持

*需要第三方依赖项

实时演示

实时交互演示在此处

www.clarketravis.com/tableexport

许可证

TableExport.js 的授权条款遵循 MIT 许可协议

致谢