自定义单元格实现换行缩小字体显示效果

背景
在Excel和SpreadJS中，下可以设置单元格文本属性“缩小字体填充”以便在文本过长时自动缩小字体以适应单元格大小。然而，当启用自动换行功能时，“缩小字体填充”功能就无法设置了。因此，只能实现单行的缩小字体填充


很多的用户在使用spreadjs时，又希望能在自动换行的情况下实现文本自动缩小以适应单元格高度。
本文将介绍如何通过SpreadJS自定义单元格类型来实现这一效果

实现思路
SpreadJS允许开发者自定义单元格类型，我们可以在自定义单元格类型的paint方法中，通过getAutoFitHeight方法获取文本显示所需的高度，并与当前单元格高度进行比较。如果超出当前单元格高度，则缩小字体并重新测量，重复这一过程直到文本高度小于单元格高度。然后再调用原有的paint方法进行渲染。

关键代码
首先，定义一个自定义的单元格类型WrapFitCellType，继承自SpreadJS的GC.Spread.Sheets.CellTypes.Text类。Text类型已经实现了单元格文本编辑和渲染的逻辑。我们只需要对paint方法改写来实现我们的逻辑：

1. function WrapFitCellType() {
   
2. }
   
3. WrapFitCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
   
4. WrapFitCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
   
5.      if (value) {
   
6.           while (true) {
   
7.                var fitheight = this.getAutoFitHeight(value, this.format(value, style.formatter), style, 1, context);
   
8.                if (fitheight < h - 4) {
   
9.                     break;
   
10.                }
    
11.                //减小字体的大小直到合适，字体大小为字符串，例如“ 12px”，因此我们需要删除“px”或“pt”并将其转换为数字
    
12.                if (style.fontSize.indexOf("px") > 0)
    
13.                     style.fontSize = parseInt(style.fontSize.substring(0, style.fontSize.length - 2)) - 1 + "px";
    
14.                else if (style.fontSize.indexOf("pt") > 0)
    
15.                     style.fontSize = parseInt(style.fontSize.substring(0, style.fontSize.length - 2)) - 1 + "pt";
    
16.           }
    
17.           context.fontInfo = null;
    
18.           context.lineHeight = null;
    
19.           //仍然调用Text.paint方法，仅改变了style.fontSize
    
20.           GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, [ctx, value, x, y, w, h, style, context]);
    
21.      }
    
22. };

复制代码

调用示例代码

1.      spread.getActiveSheet().setCellType(0, 0, new WrapFitCellType());
   
2.      spread.getActiveSheet().setRowHeight(0, 100);
   
3.      spread.getActiveSheet().setColumnWidth(0, 200);
   
4.      spread.getActiveSheet().getCell(0, 0).wordWrap(true);
   
5.      spread.getActiveSheet().getCell(0, 0).fontSize("50px");
   

复制代码

在这个单元格中，字体大小是50px，当输入的文字显示不下的时候，渲染时就会自动调整字体大小进行适应

这个仅改变了单元格显示的字体大小，工具栏上方的字体大小的数字没有变化，导出excel或者pdf后还是原来的字体，不是缩小后的字体

同样的思路，可以直接通过一个方法来给单元格设置合适的字体大小

1. function FitWrapCell(sheet, row, col) {
   
2.      var instance=new GC.Spread.Sheets.CellTypes.Text();
   
3.      var h=sheet.getRowHeight(row);
   
4.      var style=sheet.getActualStyle(row, col);
   
5.      var fontSize=style.fontSize;
   
6.      while (true) {
   
7.           var fitheight = instance.getAutoFitHeight(
   
8.                sheet.getValue(row, col),
   
9.                sheet.getText(row, col),
   
10.                style,
    
11.                sheet.zoom(),
    
12.                { "sheet": sheet, "row": row, "col": col, "sheetArea": GC.Spread.Sheets.SheetArea.viewport });
    
13.           if (fitheight < h - 4) {
    
14.                break;
    
15.           }
    
16.           //减小字体的大小直到合适，字体大小为字符串，例如“ 12px”，因此我们需要删除“px”或“pt”并将其转换为数字
    
17.           if (fontSize.indexOf("px") > 0)
    
18.                fontSize = parseInt(fontSize.substring(0, fontSize.length - 2)) - 1 + "px";
    
19.           else if (fontSize.indexOf("pt") > 0)
    
20.                fontSize = parseInt(fontSize.substring(0, fontSize.length - 2)) - 1 + "pt";
    
21.           style.fontSize = fontSize;
    
22.      }
    
23.      sheet.getCell(row, col).fontSize(fontSize);
    
24. 
    
25. }

复制代码