SpreadJS如何导出列头

发布时间:2017/09/18 00:09 发布者:ClarkPan

返回博客中心

       众所周知,Excel的列头部分是无法进行自定义的,每当用户想要实现多列头或者自定义列名的表格时都会造成一些困扰(必须将列头设置在单元格中),SpreadJS为了避免这样的困扰,在列头上是可以进行自定义设置的。这样做为用户提供了方便,但也带来了一些问题。因为Excel并不支持列头自定义,所以在SpreadJS中自定义的列头无法导出到Excel中显示,但是导出功能往往是最常见的功能之一。那么怎样解决这个问题呢?

       大致思路是我们需要在导出之前做一些预处理在单元格的头行新增指定的行数,并将列头的内容复制到新增的行中。但是进行这样操作的要求同时不会破坏SpreadJS原有的显示,所以我们需要建立一个临时的Spread工作簿,并且这个工作簿不会被显示出来,以上的操作全部在该工作簿中完成。

       首先,建立临时的工作簿tempspread,该工作簿是页面显示工作簿的拷贝:

var json = JSON.stringify(spread.toJSON());
var tempSpread = new GC.Spread.Sheets.Workbook();
tempSpread.fromJSON(json);

       接下来,将表头内容以,格式,合并单元格复制到新增行中:

var hearderStyle = new GC.Spread.Sheets.Style();
hearderStyle.borderLeft =new GC.Spread.Sheets.LineBorder("black",GC.Spread.Sheets.LineStyle.medium);
hearderStyle.borderTop = new GC.Spread.Sheets.LineBorder("black",GC.Spread.Sheets.LineStyle.medium);
hearderStyle.borderRight = new GC.Spread.Sheets.LineBorder("black",GC.Spread.Sheets.LineStyle.medium);
hearderStyle.borderBottom = new GC.Spread.Sheets.LineBorder("black",GC.Spread.Sheets.LineStyle.medium);
hearderStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
hearderStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center;
for(var sheetPro in tempSpread.sheets){
    var sheet = tempSpread.sheets[sheetPro];
    if(!(sheet instanceof GC.Spread.Sheets.Worksheet)){
        continue;
    }
    var headerRowCount = sheet.getRowCount(GC.Spread.Sheets.SheetArea.colHeader);
    //判断是否需要导出列头
    if(headerRowCount > 1 || sheet.getText(0, 0, GC.Spread.Sheets.SheetArea.colHeader) !== "A"){
    	sheet.addRows(0, headerRowCount);
        for(var row = 0; row < headerRowCount; row++){
            sheet.setStyle(row, -1, hearderStyle);
            for(var col = 0; col < sheet.getColumnCount(); col++){
                sheet.setValue(row, col, sheet.getText(row, col, GC.Spread.Sheets.SheetArea.colHeader));
                var span = sheet.getSpan(row, col, GC.Spread.Sheets.SheetArea.colHeader)
                if(span && span.row === row && span.col ===col && (span.rowCount > 1 || span.colCount > 1) && span.rowCount <= headerRowCount -  span.row && span.colCount <= colCount - span.col){
                    sheet.addSpan(span.row, span.col, span.rowCount, span.colCount)
                }
    	    }
        }
        sheet.frozenRowCount(headerRowCount);
    }						
}

最后,导出tempspread生成的json:

var newJSON = tempSpread.toJSON();
excelIo.save(newJSON, function (blob) {
    saveAs(blob, fileName);
}, function (e) {
    // process error
    console.log(e);
}, {password: password});

以上就是大致的思路与实现过程,详细的代码实例可以参考:

http://runjs.cn/detail/bxftqmll


关于葡萄城

赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

了解详情,请访问葡萄城官网