最近公司有一个新的需求，需要对一个列表进行在线编辑并导出．但是我们也没有在线编辑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即可完成导出.