Git Product home page Git Product logo

tableexport's Introduction

Build Status

The simple, easy-to-implement plugin to export HTML tables to xlsx, xls, csv, and txt files

Getting Started

Download and Setup

To use this plugin, include the jQuery library, FileSaver.js script, and TableExport.js plugin before the closing <body> tag of your HTML document:

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

Install with Bower

$ bower install tableexport.js

Install with npm

$ npm install tableexport
uncompressed compressed
CSS ๐Ÿ”— ๐Ÿ”—
JS ๐Ÿ”— ๐Ÿ”—
Images โ€” ๐Ÿ”—xlsx๐Ÿ”—xls๐Ÿ”—csv๐Ÿ”—txt

Dependencies

Required:

* jQuery dependency requirement is removed as of 4.0.0-alpha.1

Optional / Theming:

Add-Ons:

In order to provide Office Open XML SpreadsheetML Format ( .xlsx ) support, you must include the following third-party script to your project before FileSaver.js and TableExport.js.

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

Older Browsers:

To support older browsers ( Chrome < 20, Firefox < 13, Opera < 12.10, IE < 10, Safari < 6 ) include the Blob.js polyfill before the FileSaver.js script.

Until Safari provides native support for either the HTML5 download attribute or service workers, limited xlx and xlsx support is provided by including the Blob.js polyfill, albeit the filename will always be labeled Unknown.

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

Usage

CSS

By default, TableExport.js utilizes the Bootstrap CSS framework to deliver enhanced table and button styling. For non-Bootstrap projects, initialize with the bootstrap property set to false.

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

When used along with Bootstrap, there are four custom classes .xlsx, .xls, .csv, .txt providing button styling for each of the exportable filetypes.

JavaScript

To use the export plugin, just call:

$("table").tableExport();

Additional properties can be passed in to customize the look and feel of your tables, buttons, and exported data.

Notice that by default, TableExport will create export buttons for three different filetypes xls, csv, txt. You can choose which buttons to generate by setting the formats property to the filetypes of your choice.

/* 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 cells from the exported file
    emptyCSS: ".tableexport-empty"      // (selector, selector[]), selector(s) to replace cells with an empty string in the exported file
});

Note: to use the xlsx filetype, you must include the third-party scripts listed in the Dependencies section.

TableExport supports additional methods (update, reset and remove) to control it after creation.

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

Properties

A table of available properties and their usage can be found here

Methods

A table of available methods and their usage can be found here

Settings

Each button is assigned a default class and default content based on its respective filetype and corresponding css styles.

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

Below are additional defaults to support the functionality of the plugin that.

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

Browser Support

Chrome Firefox IE Opera Safari *
Android โœ“ โœ“ - โœ“ -
iOS โœ“ - - - โœ“
Mac OSX โœ“ โœ“ - โœ“ โœ“
Windows โœ“ โœ“ โœ“ โœ“ โœ“

*only partial support for xls and xlsx: requires third-party dependency (Blob.js)

Live Demo

A live, interactive demo can be found here. Also, check out the TableExport + RequireJS skeleton,

License

TableExport.js is licensed under the terms of the MIT License

Credits

tableexport's People

Contributors

clarketm avatar peterdavehello avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.