当前位置：首页 > 网页特效 > 表格

可将HTML表格导出为Excelcsvtxt文件的jQuery插件

分类：表格日期：2024-05-14 点击(2) 评论(0)

简介

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文件。

```html
<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。

```html
$("table").tableExport({
    bootstrap: false
});   
```      
如果使用了Bootstrap，那么有4个可用的按钮class类，它们分别为.xlsx, .xls, .csv 和 .txt的导出按钮提供样式。

#####  初始化插件
在页面DOM元素加载完毕之后，可以通过tableExport()方法来初始化该表格插件。

```html
$("table").tableExport();
```
#####  配置参数
TableExport插件的默认配置参数如下：

```html
/* 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类，和显示的内容。如下：

```html
/* 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"
};          
```        
下面是插件额外的默认值。

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

web299.com

可将HTML表格导出为Excelcsvtxt文件的jQuery插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果