SpreadJS 生成报表

Posted 2020-11-24 guxingy

 

空了再写个完整的demo吧 

 

//报表控件 输入参数待定
function SpreadObj(response) {

    var spread = null;

    //数据列表
    var dataArray = [
      ["位置", ‘至上期末位移值（mm）‘, ‘本期位移（mm）‘,‘至本期末位移(mm)‘, ‘最大位移量（mm）‘, ‘位移速率（mm/月）‘, ‘预警值（mm）‘, ‘控制值（mm）‘],     
    ];

    //数据列表信息 端点坐标
    var dataListInfo = {
        x: 0,//顶点坐标（左上角） x
        y: 4,//顶点坐标（左上角） y
        rows: 5,//行数
        cols: 7//列数
    };

    //基本信息
    var baseInfo = {
        reportName: ‘‘,
        reportNum: ‘‘,
        bridgeName: ‘‘,
        monitorUnit: ‘‘,
        monitorDate: ‘‘
    };


    //加载控件
    function loadSpread() {
        InitBaseInfo();

        spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
            sheetCount: 1
        });
        initSpread(spread);//初始化
        //bindEvent(spread);//加载按钮事件
        switchRowColumn(spread);
    }
    loadSpread();
    

    //
    this.ExportExcel = function (fileName) {
        var excelIo = new GC.Spread.Excel.IO();
        excelIo.save(spread.toJSON(), function (blob) {
            saveAs(blob, fileName + ‘.xlsx‘);
        }, function (e) {
            console.error(e);//err
        }, {
            //password: ‘123‘//设置密码
        });
    };



    //初始化基础数据
    function InitBaseInfo() {
        baseInfo.reportName = response.reportName;
        baseInfo.reportNum = response.reportnumber;
        baseInfo.bridgeName = response.bridgeName;
        baseInfo.monitorUnit = response.monitorUnit;
        baseInfo.monitorDate = response.monitorDate;

        for (var i = 0; i < response.ListData.length; i++) {
            var item = response.ListData[i];
            dataArray.push(item);
        }
        dataListInfo.cols = dataArray[0].length;
        dataListInfo.rows = dataArray.length;

        console.log(dataListInfo);
    }


    //跟按钮绑定事件
    function bindEvent(spread) {
        //切换行和列
        document.getElementById("btn1").onclick = function () {
            switchRowColumn(spread);
        };

        //打印
        document.getElementById("btn2").onclick = function () {
            spread.print();//参数为索引
            //spread.print(sheetIndex?);
        };

        //导出
        document.getElementById("btn3").onclick = function () {
            var excelIo = new GC.Spread.Excel.IO();
            //instance.save(json, successCallBack, errorCallBack, options);
            console.log(JSON.stringify(spread.toJSON()));
            excelIo.save(spread.toJSON(), function (blob) {
                saveAs(blob, ‘excel1.xlsx‘);
            }, function (e) {
                console.error(e);//err
            }, {
                //password: ‘123‘//设置密码
            });
        };
    }

    //初始化 工作簿
    function initSpread(spread) {

        //设置工作表名称
        var sheet1 = spread.sheets[0];
        sheet1.name("Common Chart");
        
        //定义图表类型
        var chartType = [{
            type: GC.Spread.Sheets.Charts.ChartType.line,
            desc: "line",
        }, {
            type: GC.Spread.Sheets.Charts.ChartType.lineStacked,
            desc: "lineStacked",
        }, {
            type: GC.Spread.Sheets.Charts.ChartType.lineStacked100,
            desc: "lineStacked100",
        }, {
            type: GC.Spread.Sheets.Charts.ChartType.lineMarkers,
            desc: "lineMarkers",
        }, {
            type: GC.Spread.Sheets.Charts.ChartType.lineMarkersStacked,
            desc: "lineMarkersStacked",
        }, {
            type: GC.Spread.Sheets.Charts.ChartType.lineMarkersStacked100,
            desc: "lineMarkersStacked100",
        }];

        spread.suspendPaint();
        //初始化 工作表
        initSheet(sheet1,chartType[3].desc);

        //添加图表
        initChart(sheet1,chartType[3].type);
        spread.options.tabStripRatio = 0.8;
        spread.resumePaint();


      
    }

    //初始化 工作表
    function initSheet(sheet) {
        sheet.suspendPaint();//挂起渲染
        sheet.setArray(dataListInfo.y, dataListInfo.x, dataArray);//参数： y  x  data
        sheet.resumePaint();//继续渲染

        //var activeSheet = spread.getActiveSheet();//获取当前激活的工作表
        var activeSheet = sheet;

        //value = instance.getCell(row, col, sheetArea);
        //cell.hAlign(GC.Spread.Sheets.HorizontalAlign.center);
        activeSheet.getCell(0, 0).value(baseInfo.reportName).font("25pt 宋体").hAlign(GC.Spread.Sheets.HorizontalAlign.center);
        activeSheet.getCell(1, 0).value("报表编号（" + baseInfo.reportNum + ")").font("15pt 宋体").hAlign(GC.Spread.Sheets.HorizontalAlign.center);
        activeSheet.getCell(2, 0).value("桥梁名称：" + baseInfo.bridgeName);
        activeSheet.getCell(2, 4).value("监测单位：" + baseInfo.monitorUnit);
        activeSheet.getCell(3, 0).value("监测时间：" + baseInfo.monitorDate);

        //行号自适应
        activeSheet.getCell(dataListInfo.rows + 20, 0).value("说明").hAlign(GC.Spread.Sheets.HorizontalAlign.center);;
        activeSheet.getCell(dataListInfo.rows + 21, 0).value("分析与建议").hAlign(GC.Spread.Sheets.HorizontalAlign.center);;
        activeSheet.getCell(dataListInfo.rows + 22, 0).value("监控员：                                 分析员：                                    审核员：");

        //单元格高宽自适应
        //activeSheet.autoFitColumn(0);//列宽自适应 参数：columnIndex
        activeSheet.autoFitRow(0);//行高自适应 参数：rowIndex
        activeSheet.autoFitRow(1);


        //单元格居中
        //value = instance.getRange(row, col, rowCount, colCount, sheetArea);
        activeSheet.getRange(dataListInfo.y, dataListInfo.x, dataListInfo.rows, dataListInfo.cols, GC.Spread.Sheets.SheetArea.viewport).hAlign(GC.Spread.Sheets.HorizontalAlign.center);


        //列宽自适应
        for (var i = dataListInfo.x + 1; i < dataListInfo.cols; i++) {
            activeSheet.autoFitColumn(i);
        }


        //单元格合并
        //value = instance.addSpan(row, column, rowCount, colCount, sheetArea);
        var baseColumns = 8;//合并列最大宽度
        activeSheet.addSpan(0, 0, 1, baseColumns, GC.Spread.Sheets.SheetArea.viewport);
        activeSheet.addSpan(1, 0, 1, baseColumns, GC.Spread.Sheets.SheetArea.viewport);
        activeSheet.addSpan(2, 0, 1, baseColumns / 2, GC.Spread.Sheets.SheetArea.viewport);
        activeSheet.addSpan(2, baseColumns / 2, 1, baseColumns / 2, GC.Spread.Sheets.SheetArea.viewport);
        activeSheet.addSpan(3, 0, 1, baseColumns, GC.Spread.Sheets.SheetArea.viewport);
        //行号自适应
        activeSheet.addSpan(dataListInfo.rows + 20, 0, 1, 2, GC.Spread.Sheets.SheetArea.viewport);
        activeSheet.addSpan(dataListInfo.rows + 20, 2, 1, baseColumns - 2, GC.Spread.Sheets.SheetArea.viewport);
        activeSheet.addSpan(dataListInfo.rows + 21, 0, 1, 2, GC.Spread.Sheets.SheetArea.viewport);
        activeSheet.addSpan(dataListInfo.rows + 21, 2, 1, baseColumns - 2, GC.Spread.Sheets.SheetArea.viewport);
        activeSheet.addSpan(dataListInfo.rows + 22, 0, 1, baseColumns, GC.Spread.Sheets.SheetArea.viewport);


        //activeSheet.getCell(0, 0).borderBottom(new GC.Spread.Sheets.LineBorder("", GC.Spread.Sheets.LineStyle.medium));
        //activeSheet.getRange(-1, 3, -1, 1, GC.Spread.Sheets.SheetArea.viewport).borderBottom(new GC.Spread.Sheets.LineBorder("blue", GC.Spread.Sheets.LineStyle.mediumDashed));


        //隐藏网格线
        //activeSheet.options.gridline = {
        //    showVerticalGridline: false,
        //    showHorizontalGridline: false
        //};

        ////数据列表不跟着列标题走，解决：写入空单元格写入空数据，就不会有那样的问题
        //for (var i = 0; i < 4; i++) {
        //    //行
        //    activeSheet.getCell(i, 0).value("");
        //}
        //for (var i = 0; i < dataArray.length; i++) {
        //    //行
        //    for (var j = 0; j < dataArray[0].length; j++) {
        //        //列
        //        activeSheet.getCell(i + 4, j).value(dataArray[i][j]);
        //    }
        //}
    }

    //初始化 图表
    function initChart(sheet) {
        //add common chart
        //GC.Spread.Sheets.Charts.Chart(sheet, name, chartType, x, y, width, height, dataRange, dataOrientation);
        //chartType：图表类型
        //           位置：GC.Spread.Sheets.Charts Namespace : ChartType Enumeration:
        //           类型：line，lineMarkers，columnClustered，pie
        //dataOrientation：数据区域
        //sheet.charts.add(‘Chart1‘, GC.Spread.Sheets.Charts.ChartType.lineMarkers, 0, 100, 800, 300, "A11:H14");

        //根据列表自动调整图表的位置
        //一个单元格默认为20的高度
        var y = dataListInfo.rows * 20 + 6 * 20;
        var width = dataListInfo.cols * 110;

        var chart = sheet.charts.add(‘chart1‘, GC.Spread.Sheets.Charts.ChartType.lineMarkers, 0, y, width, 300, getArea());

        var title = chart.title();
        title.text = "";//图表的名称，缺省时不显示
        title.fontSize = 18;
        chart.title(title);
    }

    //根据 数据列表 得到 统计图表 的数据区域（dataOrientation）
    function getArea() {
        //例子
        //A1:H4
        //10, 0
        //A11:H14

        var x = dataListInfo.x;
        var y = dataListInfo.y;
        var character = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "X", "Y", "Z"];

        //得到数据列表区域的 两个对角点的坐标
        //左上角
        var topPos = {
            x: 1 + x,
            y: 1 + y
        };
        //右下角
        var endPos = {
            x: 3 + x,
            y: y + dataListInfo.rows
        };

        var startChar = character[x];//开始字母
        var endChar = character[endPos.x - 1];//结束字母

        return startChar + topPos.y + ‘:‘ + endChar + endPos.y;
    }

    //切换行和列
    function switchRowColumn(spread) {
        var activeChart = spread.getActiveSheet().charts.all()[0];
        if (activeChart) {
            var isSwitched = activeChart.switchDataOrientation();
            if (!isSwitched) {
                alert("‘Can‘t switch row/column");
            }
        }
    }

}