spreadJs实现基本的表格编辑 导入导出

需求：报表形式展示，根据时间获取接口返回的数据，绑定到用spreadJs实现的excel上面，这个excel能正常的编辑，导出，别的excel能导入进来

初体验只能去官方啃文档：
官方链接
把相应的依赖先装好：

//使用以下命令在项目中导入SpreadJS Vue模块：
npm install @grapecity/spread-sheets-vue
npm install @grapecity/spread-sheets
//使用以下命令在项目中导入Excel IO Vue模块和FileSaver Vue模块：
npm install @grapecity/spread-excelio
npm install file-saver --save

然后代码中进行实现初始化一个excel：

 <div>
      <gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
        <gc-worksheet> </gc-worksheet>
      </gc-spread-sheets>
      <div class="options-container">
        <div class="option-row">
          <div class="inputContainer">
            <input type="file" id="fileDemo" class="input" @change="changeFileDemo" />
            <input type="button" id="loadExcel" value="import" class="button" @click="loadExcel" />
          </div>
          <div class="inputContainer">
            <input id="exportFileName" value="export.xlsx" class="input" @change="changeExportFileName" />
            <input type="button" id="saveExcel" value="export" class="button" @click="saveExcel" />
          </div>
        </div>
      </div>
    </div>

import相关依赖：

import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import * as GC from '@grapecity/spread-sheets'
import {
    
     IO } from '@grapecity/spread-excelio'
import '@grapecity/spread-sheets-vue'
import {
    
     saveAs } from 'file-saver'

将用到的变量定义到data中：

 data () {
    
    
    return {
    
    
      hostClass: 'spread-host',
      reportData: [],
     }
    }

初始化excel

initSpread (spread) {
    
    
      this.spread = spread
      let sheet = this.spread.getActiveSheet()
      sheet.getCell(0, 0).vAlign(GC.Spread.Sheets.VerticalAlign.center)
      sheet.setValue(0, 0, '测试项目第一列')
      sheet.setValue(0, 1, 'xxxxxx')
      sheet.setValue(2, 4, '2022年3月')
      sheet.setValue(2, 12, 'xxxxx')
      sheet.setValue(3, 0, 'xxxx')
      sheet.setValue(3, 1, 'xxxx名称')
      sheet.setValue(3, 2, 'xxxx单位')
      sheet.setValue(3, 3, '序号')
      sheet.setValue(3, 4, '总xxxxx')
      sheet.setValue(3, 5, 'xxxxxxxx')
      sheet.setValue(4, 5, 'xxxxxxx')
      sheet.setValue(4, 6, 'xxxxx')
      sheet.setValue(4, 7, 'xxxxx')

      sheet.setValue(3, 8, 'xxxxx')
      sheet.setValue(4, 8, 'xxxxx')
      sheet.setValue(4, 9, 'xxxxx')
      sheet.setValue(4, 10, 'xxxx')
      sheet.setValue(3, 11, 'xxxxx%')
      sheet.setValue(3, 12, 'xxxx%')
      sheet.setValue(3, 13, '备注')

      sheet.addSpan(0, 0, 3, 1)
      sheet.addSpan(0, 1, 1, 13)
      sheet.addSpan(3, 0, 2, 1)
      sheet.addSpan(3, 1, 2, 1)
      sheet.addSpan(3, 2, 2, 1)
      sheet.addSpan(3, 3, 2, 1)
      sheet.addSpan(3, 4, 2, 1)
      sheet.addSpan(3, 5, 1, 3)
      sheet.addSpan(3, 8, 1, 3)
      sheet.addSpan(3, 11, 2, 1)
      sheet.addSpan(3, 12, 2, 1)
      sheet.addSpan(3, 13, 2, 1)

      sheet.getRange(3, 5, 1, 3).hAlign(GC.Spread.Sheets.HorizontalAlign.center)
      sheet.getRange(3, 8, 1, 3).hAlign(GC.Spread.Sheets.HorizontalAlign.center) 					     // 固定单元格居中

      sheet.deleteRows(5, 1) //删除动态数据表头那一行
      sheet.frozenRowCount(6) //冻结第六行
      sheet.frozenColumnCount(1) // 冻结第一列
      sheet.options.frozenlineColor = 'green' // 冻结线的颜色
      //具体单元格的字体样式
      sheet
        .getCell(0, 1)
        .font('bold normal 22px normal')
        .hAlign(GC.Spread.Sheets.HorizontalAlign.center)
        .vAlign(GC.Spread.Sheets.VerticalAlign.center)
        //单元格对其方式底部对其
      sheet.getCell(0, 0).vAlign(GC.Spread.Sheets.VerticalAlign.bottom)
      //字体颜色红色
      sheet
        .getCell(3, 1)
        .vAlign(GC.Spread.Sheets.VerticalAlign.center)
        .hAlign(GC.Spread.Sheets.HorizontalAlign.center)
        .foreColor('red')
      sheet
        .getCell(3, 2)
        .vAlign(GC.Spread.Sheets.VerticalAlign.center)
        .hAlign(GC.Spread.Sheets.HorizontalAlign.center)
        .foreColor('red')
      sheet.getCell(3, 3).vAlign(GC.Spread.Sheets.VerticalAlign.center).hAlign(GC.Spread.Sheets.HorizontalAlign.center)
      sheet.getCell(3, 4).vAlign(GC.Spread.Sheets.VerticalAlign.center).hAlign(GC.Spread.Sheets.HorizontalAlign.center)
      sheet.getCell(3, 11).vAlign(GC.Spread.Sheets.VerticalAlign.center).hAlign(GC.Spread.Sheets.HorizontalAlign.center)
      sheet.getCell(3, 12).vAlign(GC.Spread.Sheets.VerticalAlign.center).hAlign(GC.Spread.Sheets.HorizontalAlign.center)
      sheet.getCell(3, 13).vAlign(GC.Spread.Sheets.VerticalAlign.center).hAlign(GC.Spread.Sheets.HorizontalAlign.center)
      sheet.getCell(3, 0).vAlign(GC.Spread.Sheets.VerticalAlign.center).hAlign(GC.Spread.Sheets.HorizontalAlign.center)
      sheet
        .getRange(4, 5)
        .wordWrap(true)
        .vAlign(GC.Spread.Sheets.VerticalAlign.center)
        .hAlign(GC.Spread.Sheets.HorizontalAlign.center)
      sheet
        .getRange(4, 6)
        .wordWrap(true)
        .vAlign(GC.Spread.Sheets.VerticalAlign.center)
        .hAlign(GC.Spread.Sheets.HorizontalAlign.center)
      sheet
        .getRange(4, 7)
        .wordWrap(true)
        .vAlign(GC.Spread.Sheets.VerticalAlign.center)
        .hAlign(GC.Spread.Sheets.HorizontalAlign.center)
      sheet
        .getRange(4, 8)
        .wordWrap(true)
        .vAlign(GC.Spread.Sheets.VerticalAlign.center)
        .hAlign(GC.Spread.Sheets.HorizontalAlign.center)
      sheet
        .getRange(4, 9)
        .wordWrap(true)
        .vAlign(GC.Spread.Sheets.VerticalAlign.center)
        .hAlign(GC.Spread.Sheets.HorizontalAlign.center)
      sheet
        .getRange(4, 10)
        .wordWrap(true)
        .vAlign(GC.Spread.Sheets.VerticalAlign.center)
        .hAlign(GC.Spread.Sheets.HorizontalAlign.center)
      sheet
        .getRange(3, 11)
        .wordWrap(true)
        .vAlign(GC.Spread.Sheets.VerticalAlign.center)
        .hAlign(GC.Spread.Sheets.HorizontalAlign.center)
      sheet
        .getRange(3, 12)
        .wordWrap(true) //设置单元格超出部分换行
        .vAlign(GC.Spread.Sheets.VerticalAlign.center)
        .hAlign(GC.Spread.Sheets.HorizontalAlign.center)
      sheet.setRowHeight(0, 30) //设置某一行的高度
      sheet.setRowHeight(4, 60)
      sheet.setRowHeight(2, 20)
      sheet.setColumnWidth(0, 200) //设置某一列的宽度
      var lineStyle = GC.Spread.Sheets.LineStyle.thin //设置线条样式为实线
      var lineBorder = new GC.Spread.Sheets.LineBorder('black', lineStyle)
      var sheetArea = GC.Spread.Sheets.SheetArea.viewport
      sheet.getRange(2, 0, 1, 14).setBorder(lineBorder, {
    
     bottom: true }, sheetArea) //设置第二行 从第0列到14列的底部边框
      sheet.getRange(3, 0, 2, 14).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), {
    
     all: true })
        // sheet.getRange(6, 0, 1, 14).setBorder(lineBorder, { bottom: true }, sheetArea)
    },

获取动态数据：

	getReportData () {
    
    
      let date = this.queryParam.investDate__eq //动态绑定的日期
      if (date === undefined || date === null || date === '') {
    
    
        this.$message.warning('请选择日期！')
      } else {
    
    
        this.initQueryParam.investDate = date
        var url = 'xxxxxxxxxx'
        getAction(xxx, {
    
     fileUrl: url }).then((res) => {
    
    
          this.reportData = res.result
          let sheet = this.spread.getActiveSheet()
          this.spread.refresh()
          //定义绑定到excel上的数据格式data
          var data = {
    
    
            datasource: this.reportData[1]
          }
          var source = new GC.Spread.Sheets.Bindings.CellBindingSource(data)
          sheet.setDataSource(source)
          this.getExcelR(sheet) //创建动态数据table
          let leg = this.reportData[1].length
          sheet.getRange(5, 0, leg, 14).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), {
    
     all: true })
          sheet.getRange(5, 0, leg, 4).backColor('#DCDCDC', {
    
     all: true })
          sheet.getRange(5, 4, 5, 9).backColor('#DCDCDC', {
    
     all: true })
        })
      }
    },

在excel上面具体的位置创建动态table：

	getExcelR (sheet) {
    
    
	//从第五行第0列开始创建
      var table = sheet.tables.add('tableRecords', 5, 0, 1, 14)
      table.autoGenerateColumns(true) //根据内容自适应表格
      var tableColumns = []
      var namesL = []
      var names = []
      this.reportData[1].forEach((item) => {
    
    
        for (var key in item) {
    
    
          namesL.push(key)
        }
      })
      for (var i = 0; i < namesL.length; i++) {
    
    
        names.push('column' + i)
        sheet.autoFitColumn(i)
      }

      names.forEach(function (data, index) {
    
    
        var tableColumn = new GC.Spread.Sheets.Tables.TableColumn()
        tableColumn.name(names[index])
        tableColumn.dataField(data)
        tableColumns.push(tableColumn)
      })

      table.bindColumns(tableColumns)
      table.bindingPath('datasource')
      table.bandColumns(true)
      table.style(null)

      // 隐藏表头
      table.showHeader(false)
      sheet.deleteRows(5, 1)
    },

仅供参考