关于javascript:xspreadsheet-自定义工具栏

最近公司有一个新的需要，须要对一个列表进行在线编辑并导出．然而咱们也没有在线编辑excel的教训，所以就找了一个网上比拟火的x-spreadsheet的js库. 原文地址. 不得不说这个11k的我的项目的弱小．然而工具栏也忒少了．我想要的导出也没有．无奈之下，只能clone源码来进行二次开发了．上面记录我的开发过程以及次要批改的js文件．

目录

├── algorithm    // 算法
├── canvas    // 画图
├── component    // 组件
│   ├── toolbar    // 工具栏
├── core    // 外围代码
├── index.less // 入口css
└── locale // 国际化

咱们先大略理解一下目录，这次次要是工具栏．所以就得先解决一下工具栏的代码.

减少工具栏图标

理解了目录，咱们间接参考一个redo.js间接搞一个.
// component/toolbar

import IconItem from './icon_item';

export default class Save extends IconItem {
  constructor() {
    super('save', 'Ctrl+S');
  }
}

在component/toolbar/index.js中间接引入

import Save from './save';

this.saveEl = new Save(), // 99行

这样就引入了咱们的js了.

解决款式

咱们引入了过后，其实咱们还没有设置对应的图标．在index.less中退出如下的语句

&.save{
      left: -3 * @icon-size;
      top: -1 * @icon-size;
    }

即可减少咱们的图标展现. 所有的图标都在外层的assets目录下.

事件绑定

咱们有了这个过后，就须要绑定咱们的事件了.咱们这里次要是应用了快捷键. ctrl + s.或者点击保留也能够保留．那咱们就须要在工作表外面的keydown事件减少ctrl+s组合键.

// component/toolbar.js 138行
this.saveEl = buildButtonWithIcon(`${t('toobar.save')} (Ctrl+S)`, 'save', () => this.change('save')),

这样咱们就绑定了一个save. 然而对应的解决办法还没有解决. 所以，咱们须要在this.change外面去解决这个办法. 而这个this.change则是在toolbar初始化的时候，加上的．咱们能够在sheet.js的600行左右看到如下代码

toolbar.change = (type, value) => toolbarChange.call(this, type, value);

所以，咱们只须要解决toolbarChange这个办法即可了.

// 在534行左右减少如下代码. 
else if (type === 'save') {
    this.trigger('saved', this);
} 

这个示意间接触发saved事件. 内部只须要监听这个事件即可了.

处理事件

xs.on('saved', function(){
    // 这里书写本人的导出办法即可. 
});

导出的办法官网上也有. 能够参考这个链接.

https://github.com/SheetJS/sheetjs/tree/master/demos/xspreadsheet#saving-data

即可实现导出.