html制作表格保存为txt文件,可将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=""><>.xlsx,需要在 FileSaver.js 文件之前引入 Blob.js文件。

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

201603282312454295.jpg

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值