x-spreadsheet 自定义工具栏

Posted 2021-09-25 adolph

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

即可完成导出.