SpreadJS 生成報表

 

空了再寫個完整的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");
            }
        }
    }

}