作者給的例子是另一個(gè)項(xiàng)目里的：傳送門

這個(gè)例子下載后在win上有bug：
index.html第45,46行芯丧，引用的兩個(gè)文件是鏈接映跟，在win是不生效的，手動(dòng)下載這兩個(gè)文件
index.html 第55行莹弊，var xspr = x.spreadsheet(HTMLOUT)蟋恬，變量x未定義翁潘，改成x_spreadsheet(HTMLOUT)
改了之后就，瀏覽器打開index.html后就可以使用了歼争，效果還不錯(cuò)拜马。導(dǎo)出之后會(huì)丟失所有格式。
原文鏈接

導(dǎo)出文件：傳送門

用到的代碼沐绒，做個(gè)記錄吧：

// 引入依賴
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, // 切換右鍵菜單顯示狀態(tài)
        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);
          // 導(dǎo)出數(shù)據(jù)
          this.exportExcelData = res
          // console.log('xs.getData()--', s.getData());
          // console.log('xs.getData()--', JSON.stringify(s.getData()));
        });
        // 禁止右鍵俩莽，右鍵有設(shè)置單元格可編輯菜單，防止修改表頭
        this.sheetObj.sheet.contextMenu.isHide = true
        // 導(dǎo)出數(shù)據(jù)
        this.exportExcelData = this.sheetObj.getData()
        // 設(shè)置凍結(jié)
        this.sheetObj.sheet.data.setFreeze(1, 0)

        // 編輯單元格觸發(fā)
        // 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()
    },
//導(dǎo)出
    exportExcel() {
      var new_wb = this.xtos(this.exportExcelData);
      /* generate download */
      XLSX.writeFile(new_wb, `學(xué)生信息${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;
    },
}