最近做了一個比較有趣的功能--在線編輯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也是十分強大，這里只是基礎使用方法。以上使用方法親測有效，如果你的需求更復雜，請前往官網。