自定义单元格实现换行缩小字体显示效果
本帖最后由 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, );
}
};
调用示例代码
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，当输入的文字显示不下的时候，渲染时就会自动调整字体大小进行适应
本帖最后由 HLyangtao 于 2024-10-28 14:57 编辑
这个仅改变了单元格显示的字体大小，工具栏上方的字体大小的数字没有变化，导出excel或者pdf后还是原来的字体，不是缩小后的字体
https://i.afbcs.cn/xxUf4f
同样的思路，可以直接通过一个方法来给单元格设置合适的字体大小
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);
}
页:
[1]