最近做了一个比较有趣的功能--在线编辑excel，使用的便是SpreadJS v13。虽然开发用的框架是react，但是spread对框架并没有特定要求。
先放官方文档网址，点这里
如果你没有足够的耐心看官方文档，这里将会是轻熟易懂的白话文，包括对文档参数我的理解。整个文档将是从无到数据保存大致流程写下来，有的地方会写的比较简单，因为官方文档上已经写得很清楚，最后会放一个简单的完整例子。
如果有理解错误之处，请务必留言，会尽快做出修改！！！
那么，让我们从零开始吧。
- SpreadJs引入
SpreadJS不依赖任何第三方组件。它只需要引用下列文件：gc.spread.sheets.xx.x.x.css，gc.spread.sheets.all.xx.x.x.min.js。
推荐例子：点这里
- 初始化spread
新建一个spread--Workbook
let spread = new GC.Spread.Sheet.Workbook(dom，config)
说明：
spread: 初始化的spread对象实例
dom: dom元素。例如：document.getElementById(\'ss\') 或者 this.refs.ss
config: 初始化spread的参数，例如：
let config={ sheetCount: 1, //表单数量 font: \'normal 11pt Arial\' //默认字体设置 }
获取spread实例--findControl
let spead = var spread = GC.Spread.Sheets.findControl(dom)
spread.options.newTabVisible = false //是否有新增表单的按钮 spread.options.tabEditable = false //是否可以重命名表单名字
注释：可手动获取spread实例，也可初始化时存储到一个全局变量。spread构造函数中的参数属性，点这儿
- sheet表单
获取表单
sheet = spread.getActiveSheet() //获取当前sheet sheet1 = spread.getSheet(index) //index: 下标 sheet2 = spread.getSheetFromName(\'Sheet1\'); //sheet1,名称
- spread绘制
spread.suspendPaint() //暂停绘制
spread.resumePaint() //激活绘制
大多数时候, 在你改变 Spread 之后, 控件会自动刷新以达到重绘和更新状态的目的。 可是, 如果你一次做出大量的改变, 并且不希望每次改变都去重新绘制 Spread , 那么你可以调用 suspendPaint 暂停重绘， 完成改变之后，你可以调用resumePaint 重新激活Spread重绘，例如:
var spread = GC.Spread.Sheets.findControl(document.getElementById(\'ss\')); spread.suspendPaint(); spread.addSheet(0); spread.fromJSON(json); // json data spread.resumePaint();
- 单元格
获取单元格
sheet.getCell(rowIndex,colIndex) //rowIndex:行下标,colIndex:列下表，为0时，表示整行。获取某个单元格
sheet.getRange(rowIndex,colIndex,rowCount,colCount) // 获取范围单元格。行下标，列下标，行数，列数量
合并单元格
sheet.addSpan(rowIndex,colIndex,rowCount,colCount) // 获取范围单元格。行下标，列下标，行数，列数量
sheet.removeSpan(20, 1) //调用 removeSpan 方法来分解指定包含合并的单元格。
- 单元格样式
构造样式属性
var style = new GC.Spread.Sheets.Style();
style.backColor = \'red\';
style.foreColor = \'green\';
style.isVerticalText = \'true\';
sheet.addNamedStyle(style); //添加到样式表中
sheet.getNamedStyle(\'style1\'); //获取
sheet.removeNamedStyle(\'style1\'); //删除
赋值样式
//set style to cell. sheet.setStyle(5, 5, style, GC.Spread.Sheets.SheetArea.viewport); //set style to row. sheet.setStyle(5, -1, style, GC.Spread.Sheets.SheetArea.viewport); //set style to column. sheet.setStyle(-1, 5, style, GC.Spread.Sheets.SheetArea.viewport);
单独赋样式
sheet.getCell(rowIndex,colIndex).backColor(\'red\') //背景颜色
注释：设置背景颜色时，注意使用英文颜色，例如：\'red\'。如果使用rgba,可能出现重影问题。
冻结/固定行列
sheet.frozenRowCount(count) //冻结行数量
sheet.frozenColumnCount(count) //冻结列数量
设置列宽
sheet.setColumnWidth(colIndex,width) // 设置某列宽度
- 公式
- 文本格式
sheet.getCell(rowIndex,colIndex).formatter(formatterStr)
更多用法：点这
- 表格保护
可以通过设置表单的isProtected来限制表单的操作行为，详见这里
表单是否受保护取决于两个设置共同决定，sheet.options.isProtected 以及当前单元格是否被锁定，
locked默认为true。更多体验点这里
- spread例子
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在线编辑表格</title>
</head>
<body>
<button onclick="setExcel()">点我渲染excel</button>
<button onclick="getExcelData()">点我渲染excel</button>
<div id="ss" style="width:100%; height:360px;border: 1px solid gray;"></div>
<script type="text/javascript">
//全局变量
var spread
var sheet
var spreadGSS = GC.Spread.Sheet
let rowCount = 100
let colCount = 200
let titleArr = [\'字段1\',\'字段2\',\'字段3\',\'字段4\',\'字段5\',\'字段6\',\'字段7\']
let tableData = [
[1,1,1,1,1,1,1],
[1,1,1,1,1,1,1],
]
let normalFormat = new GC.Spread.Formatter.GeneralFormatter(\'#,##0.00\') //千位符，两位小数
// 初始化spread
function initSpread(){
let ss = document.getElementById(\'ss\')
let config = { sheetCount: 1 }
spread = new spreadGSS.Workbook(ss,config)
sheet = spead.getActiveSheet()
sheet.setColumnCount(colCount) //列数量
sheet.setRowCount(rowCount) //行数量
sheet.name(\'sheet1\') //表单命名
}
function setExcel(){
sheet.reset() //重置
spread.suspendPaint() // 暂停
excelStyle()
renderHeader()
renderData()
spread.resumePaint() // 激活
}
// 样式
function excelStyle(){
let titleStyle = new spreadGSS.Style()
titleStyle.name = \'titleStyle\'
titleStyle.locked = true //用于表单保护
titleStyle.backColor = \'rgb(155,194,230)\' //蓝色
sheet.addNameStyle(titleStyle)
let normalStyle = new spreadGSS.Style()
normalStyle.name = \'normalStyle\'
normalStyle.locked = false
normalStyle.backColor = \'green\' //绿色
sheet.addNameStyle(normalStyle)
}
// 模拟表格头部 合并单元格 + 设置单元格值 + 设置样式
function renderHeader(){
let title = \'表格标题\'
let titleStyle = sheet.getNamedStyle(\'titleStyle\')
//第一行
sheet.getRange(0,0,1,7) //合并单元，0:行下标，0:列下标，1：行数，7:列数
sheet.setValue(0,0,title) //设置内容，0:行下标，0:列下标, title: 内容
// 第二行
titleArr.forEach((item,index) => {
sheet.setValue(1,index,item) // 1.设置内容
// sheet.getCell(1,index).text(item) 1.设置内容
sheet.setStyle(1,index,titleStyle,GC.Spread.Sheets.SheetArea.viewport) // 2.设置样式
// sheet.getCell(1,index).backColor(\'blue\') //2.设置样式
})
}
// 数据渲染 + 公式渲染
function renderData(){
// 从第二行渲染
let startRowIndex = 2
tableData.forEach((item,index)=>{
let curRowData = item
startRowIndex += index //行下标
// 列循环
curRowData.forEach((data,curColIndex)=>{
sheet.setValue(startRowIndex,curColIndex,data)
setFormatter(startRowIndex,curColIndex) //设置数字格式
})
})
titleArr.forEach((item,index) => {
let letter = sheet.getText(0,index,spreadGSS.SheetArea.colHeader) //获取列字母,列下标固定为0
// =SUM(A3:A4)
let formulaStr = `=SUM(${letter}3:${letter}4)`
sheet.setFormula(startRowIndex+1,index,formulaStr) //3.公式
// sheet.getCell(startRowIndex+1,index).formula(formulaStr) //3.公式
})
let normalStyle = sheet.getNamedStyle(\'normalStyle\')
sheet.setStyle(startRowIndex+1,-1,normalStyle) // 行下标,-1:整行, 样式
}
// 数据格式
function setFormatter(rowIndex,colIndex,formatterStr=normalFormat){
sheet.getCell(rowIndex,colIndex).formatter(formatterStr)
}
// 获取excel数据 sheet.getValue()
function getExcelData(){
let startRowIndex = 2
tableData.forEach((index)=>{
startRowIndex += index //行下标
// 列循环
titleArr.forEach((data,curColIndex)=>{
let value = sheet.getValue(startRowIndex,curColIndex)
console.log(value) //每个单元格的值
})
})
}
window.onload = initSpread
</script>
</body>
</html>
大致效果图：
Spread也是十分强大，这里只是基础使用方法。以上使用方法亲测有效，如果你的需求更复杂，请前往官网。