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

總結

以上是生活随笔為你收集整理的html制作表格保存为txt文件,可将HTML表格导出为Excel|csv|txt文件的jQuery插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。