关于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

即可实现导出.