spreadJS在线编辑excel的初级使用
最近做了一个比较有趣的功能--在线编辑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也是十分强大,这里只是基础使用方法。以上使用方法亲测有效,如果你的需求更复杂,请前往官网。