spreadJS在线编辑excel的初级使用

时间:2024-04-17 09:28:06

  最近做了一个比较有趣的功能--在线编辑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).formula(formulaStr)   //方式一
    sheet.setFormula(rowIndex,colIndex,formulaStr)    //方式二
  • 文本格式

    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也是十分强大,这里只是基础使用方法。以上使用方法亲测有效,如果你的需求更复杂,请前往官网。