在vue中使用x-spreadsheet初记

作者给的例子是另一个项目里的：传送门

这个例子下载后在win上有bug：
index.html第45,46行，引用的两个文件是链接，在win是不生效的，手动下载这两个文件
index.html 第55行，var xspr = x.spreadsheet(HTMLOUT)，变量x未定义，改成x_spreadsheet(HTMLOUT)
改了之后就，浏览器打开index.html后就可以使用了，效果还不错。导出之后会丢失所有格式。
原文链接

导出文件：传送门

用到的代码，做个记录吧：

// 引入依赖
import Spreadsheet from 'x-data-spreadsheet';
import XLSX from 'xlsx'
import zhCN from 'x-data-spreadsheet/src/locale/zh-cn';

Spreadsheet.locale('zh-cn', zhCN);


 mounted() {
    // this.init()
    this.initData()
  },
methods: {
initData() {
      let option  = {
        mode: 'edit', // edit | read
        showToolbar: false, // 顶部工具栏
        showGrid: true,
        showContextmenu: false, // 切换右键菜单显示状态
        showBottomBar: false,  // 底部工具栏
        view: {
          height: () => 570,
          // height: () => document.documentElement.clientHeight,
          // width: () => document.documentElement.clientWidth,
          width: () => document.getElementsByClassName('spreadsheet-box')[0].clientWidth,
        },
        row: {
          len: 100,
          height: 25,
        },
        col: {
          len: 26,
          width: 100,
          indexWidth: 60,
          minWidth: 60,
        },
        style: {
          bgcolor: '#ffffff',
          align: 'left',
          valign: 'middle',
          textwrap: false,
          strike: false,
          underline: false,
          color: '#0a0a0a',
          font: {
            name: 'Helvetica',
            size: 10,
            bold: false,
            italic: false,
          },
        },
      }

      const data1 = {
        name: 'sheet11',
        rows: {
          0: {cells: {0: {'text': 'id0', editable: false}, 1: {'text': 'name0', editable: false}}},
          1: {cells: {0: {'text': 'id1'}, 1: {'text': 'name1'}}}
        }
      }

      this.sheetObj = new Spreadsheet("#x-data-spreadsheet", option)
        .loadData(data1) // load data
        .change(res => {
          // save data to db
          // console.log('res--', res);
          // 导出数据
          this.exportExcelData = res
          // console.log('xs.getData()--', s.getData());
          // console.log('xs.getData()--', JSON.stringify(s.getData()));
        });
        // 禁止右键，右键有设置单元格可编辑菜单，防止修改表头
        this.sheetObj.sheet.contextMenu.isHide = true
        // 导出数据
        this.exportExcelData = this.sheetObj.getData()
        // 设置冻结
        this.sheetObj.sheet.data.setFreeze(1, 0)

        // 编辑单元格触发
        // s.on('cell-selected', (cell, ri, ci) => {
            // console.log('cell:', cell, ', ri:', ri, ', ci:', ci);
        // }).on('cell-edited', (text, ri, ci) => {
        //     console.log('text:', text, ', ri: ', ri, ', ci:', ci);
        // });
        

      // data validation
      this.sheetObj.validate()
    },
//导出
    exportExcel() {
      var new_wb = this.xtos(this.exportExcelData);
      /* generate download */
      XLSX.writeFile(new_wb, `学生信息${dayjs().format('YYYYMMDDHHmmss')}.xlsx`);
    },
    xtos(sdata) {
        var out = XLSX.utils.book_new();
        sdata.forEach(function(xws) {
            var aoa = [[]];
            var rowobj = xws.rows;
            for(var ri = 0; ri < rowobj.len; ++ri) {
                var row = rowobj[ri];
                if(!row) continue;
                aoa[ri] = [];
                Object.keys(row.cells).forEach(function(k) {
                    var idx = +k;
                    if(isNaN(idx)) return;
                    aoa[ri][idx] = row.cells[k].text;
                });
            }
            var ws = XLSX.utils.aoa_to_sheet(aoa);
            XLSX.utils.book_append_sheet(out, ws, xws.name);
        });
        return out;
    },
}