SpreadJs使用

初始化Spread实例

1
let spread = new GC.Spread.Sheets.Workbook(document.getElementById('spread'))

读取JSON模板 导入到spread里

1
spread.fromJSON(require(`../../static/file/${fileNameData[tableName]}`))

浮动模式插入数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const floatForm = (spread, tableName, dataSource) => {
  let sheet = spread.getActiveSheet()
  sheet.suspendPaint()
  let startRow = startRowData[tableName] // startRowData里记录的是编号 index为 编号减1
  sheet.addRows(startRow, dataSource.length - 1) // length - 1 是因为原本就有一行
  for (let i = 0, len = dataSource.length - 1; i < len; i++) {
    sheet.copyTo(startRow - 1, 1, startRow + i, 1, 1, sheet.getColumnCount() - 1, GC.Spread.Sheets.CopyToOptions.all)
    sheet.setRowHeight(startRow + i, sheet.getRowHeight(startRow - 1))
  }
  // 这里开始插入数据
  sheet.setArray(startRow - 1, 1, dataSource)
  sheet.resumePaint()
  return spread
}

事件绑定

1
2
3
4
5
6
7
8
spread.bind(spreadNS.Events.CellClick, function (e, args) {
                let sheetArea = args.sheetArea === 0 ? 'sheetCorner' : args.sheetArea === 1 ? 'columnHeader' : args.sheetArea === 2 ? 'rowHeader' : 'viewPort';
                self.eventLog =
                    'SpreadEvent: ' + GC.Spread.Sheets.Events.CellClick + ' event called' + '\n' +
                    'sheetArea: ' + sheetArea + '\n' +
                    'row: ' + args.row + '\n' +
                    'col: ' + args.col;
            });

所有单元格都不能编辑

1
sheet.setIsProtected(true);

导出操作

1
2
3
4
5
6
7
8
9
10
11
12
13
const saveExcel = (spread, fileName) => {
  let excelIo = new GC.Spread.Excel.IO()
  excelIo.save(spread.toJSON(), blob => {
    const link = document.createElement('a')
    link.download = fileName
    link.style.display = 'none'
    link.href = URL.createObjectURL(blob)
    link.click()
    URL.revokeObjectURL(link.href)
  }, e => {
    console.log(e)
  })
}

设置表格样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/**
 * 表格设置样式
 *
 * @param {*} spread
 * @param {*} rowCount 行数
 * @param {*} columnCount 列数
 */
spreadUtil.setStyle = (spread, rowCount, columnCount) => {
  let sheet = spread.getSheet(0);
  sheet
    .getRange(0, 0, rowCount, columnCount)
    .setBorder(
      new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin),
      {
        all: true
      }
    );

  let style = new GC.Spread.Sheets.Style();
  style.font = "bold 14.7px Calibri";
  style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
  style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
  sheet.setStyle(-1, -1, style, GC.Spread.Sheets.SheetArea.viewport);
};

浮动绘制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
spreadUtil.dataRender = (spread, tableName, dataSource, sheetVal) => {
  let sheet = spread.getActiveSheet();
  if (sheetVal !== undefined) {
    sheet = spread.getSheet(sheetVal);
  }
  sheet.suspendPaint();
  let startRow = startRowData[tableName]; // startRowData里记录的是编号 index为 编号减1
  sheet.addRows(startRow, dataSource.length - 1); // length - 1 是因为原本就有一行
  for (let i = 0, len = dataSource.length - 1; i < len; i++) {
    sheet.copyTo(
      startRow - 1,
      1,
      startRow + i,
      1,
      1,
      sheet.getColumnCount() - 1,
      GC.Spread.Sheets.CopyToOptions.all
    );
    sheet.setRowHeight(startRow + i, sheet.getRowHeight(startRow - 1));
  }
  // 这里开始插入数据
  sheet.setArray(startRow - 1, 0, dataSource);
  sheet.resumePaint();
  return spread;
};

spread对象转json

1
spread.toJSON()

获取单元格数据

1
2
3
sheet.getValue(7,7);

sheet.getArray(7, 7, 2, 4);

单元格删除数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
sheet.clear(0, 0, 10, 10, GC.Spread.Sheets.SheetArea.viewport, GC.Spread.Sheets.StorageType.data);
all: 工作表所有使用的范围类型。
axis: 工作表标题使用范围。
style: 工作表单元格样式使用的范围。
rowStyle: 工作表行样式使用范围。
colStyle: 工作表列样式使用范围。
data: 工作表数据使用范围。
formula: 工作表公式使用范围。
span: 工作表跨度使用范围。
shape: 工作表形状使用范围。
table: 工作表表格使用范围。
sparkLine: 工作表迷你图使用范围。
comment: 工作表注释使用范围。
slicer: 切片器使用范围。
pivottable: 工作表数据透视表使用范围。
filter: 工作表过滤器使用范围。
dataValidation: 工作表数据验证使用的范围。
conditionFormat: 工作表条件格式使用范围。
chart: 工作表图表使用范围。
picture: 工作表图片使用范围。

移动操作

1
sheet.moveTo(0, 0, 14, 14, 7, 7, GC.Spread.Sheets.CopyToOptions.all);