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);