tableexports.js 微解析

公司的一个项目功能太复杂，需要拆解，之中需要用到下载功能，本来是想着，用JAVA写个基础服务，包含异步下载和同步下载。后来，组长说， 说前端下载吧， 也行，顺便研究下。选定了tableexport.js.

tableexport.js是一个基于jQuery的插件，可以将table中的内容导出为excel, cvs, txt, png, pdf 。
excel导出除了使用该js之外还需要jQuery.js，Blob.js, FileSaver.js的支持。

我们先来看，tableexport.js的执行流程，
加载配置默认是创建下载按钮的，
1.初始化时通过createObjButton()，创建下载按钮，同时给该按钮绑定click点击下载事件，
(绑定事件的代码为：

var exportButton = document.querySelectorAll('button[' + self.storageKey + ']');_on(exportButton, 'click', self.downloadHandler, self);

)
2.点击下载，执行downloadHandler()，在downloadHandler()中执行export2file(), export2file()中判断是移动端还是web端，通过判断结果分别执行不同的导出策略
如果是手机端走downloadDataURI()， 如果是web端走FileSaver.js的saveAs();

tableexport.js的入口是tableExport()方法，在源码中该方法的内容为

$.fn.tableExport = function (options) {    return new TableExport(this, options);};

TableExport()在初始化时，首先加载配置信息，默认的配置信息代码为TableExport.prototype中的

defaults: {                headers: true,                              // (Boolean), display table headers (th or td elements) in the <thead>,(default: true)                footers: true,                              // (Boolean), display table footers (th or td elements) in the <tfoot>, (default: false)                formats: ['xlsx', 'csv', 'txt'],            // (String[]), filetype(s) for the export, (default: ['xlsx', 'csv', 'txt'])                filename: 'id',                             // (id, String), filename for the downloaded file, (default: 'id')                bootstrap: false,                           // (Boolean), style buttons using bootstrap, (default: true)                exportButtons: true,                        // (Boolean), automatically generate the built-in export buttons for each of the specified formats (default: true)                position: 'bottom',                         // (top, bottom), position of the caption element relative to table, (default: 'bottom')                ignoreRows: null,                           // (Number, Number[]), row indices to exclude from the exported file(s) (default: null)                ignoreCols: null,                           // (Number, Number[]), column indices to exclude from the exported file(s) (default: null)                trimWhitespace: true                        // (Boolean), remove all leading/trailing newlines, spaces, and tabs from cell text in the exported file(s) (default: false)            },

每个变量后都有相应的注释。
tableExport()方法传入的json对象参数也必须从这里获取和赋值。

原生tableexport.js缺陷：只能导出页面上显示的数据，分页情况下，其他页的数据不能导出到excel中。

改造，以下是个人的改造方案：
建议在downloadHandler()中进行修改，
废话不说直接上代码:

downloadHandler: function (event) {                var _this = this;                /**                 * TODO lichenyi 在data中重新赋值，来进行控制文档的内容，如果下一行被注释掉，则，导出的为页面上显示的内容                 * data的数据格式为 [[{"v":"名称"},{"v":"里程","t":""},{"v":"次数","t":""},{"v":"天数","t":""},{"v":"签到","t":""},{"v":"活动","t":""},{"v":"时间周期","t":""},{"v":"更新时间","t":""}]],                 * 每一行为一个数组， 每个数组中为一个对象， key为v,和key为t，经过亲测，key为t的键值对可以不需要，没有深入研究                 */                var data = [_this.getHeader($('table thead').find('td'))],                    mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',                    fileExtension = '.xlsx',                    merges = [];                /**                 * 通过ajax获取数据                 */                 _this.getData(data);                /**                 *这个是核心，                 */                this.export2file(data, mimeType, filename, fileExtension, merges);            },            /**             * 获取表的header             * @param {Object} html             */            getHeader: function(html){                var header = [];                for(var i = 0;i < html.length;i++){                    var td = new Object();                    td.v = html[i].innerHTML;                    td.t = '';                    header.push(td);                }                return header;            },            /**             * 动态获取页面数据  后续可以更改为Ajax或者其他方式             * @param {Object} result             */            getData: function(result){                var data = [];                for(var i = 1;i <= 100000;i++){                    data = [];                    for(var j = 1;j <= 8;j++){                        var td = new Object();                        td.v = i+' - '+j;                        data.push(td);                    }                    result.push(data);                }                return result;            }

data的数据格式为二位数组，即[[],[]]。
例如：

[[{"v":"名称","t":""},{"v":"里程","t":""},{"v":"次数","t":""},{"v":"天数","t":""},{"v":"签到","t":""},{"v":"活动","t":""},{"v":"时间周期","t":""},{"v":"更新时间","t":""}]],

json对象中key为t，value为空的键值对，暂时没弄白名是干嘛用的，本人亲测可以删除，如果大神发现t的用法请留言，我会补上。

如果觉得文章真心好， 请打赏下我吧，程序员赚钱不容易。 十块八块不嫌多， 一块两块也是爱啊！