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

收藏

本帖最后由 Richard.Ma 于 2024-11-5 11:19 编辑

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

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

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

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

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

复制代码

调用示例代码

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

复制代码

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

HLyangtao · HLyangtao

本帖最后由 HLyangtao 于 2024-10-28 14:57 编辑

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

Richard.Ma · Richard.Ma

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

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

复制代码

		自动登录	找回密码
密码			立即注册

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

2 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人