Lynn.Dou 发表于 2021-3-4 16:35:18

SpreadJS实现单元格文本完全显示

背景:
最近有小伙伴提出这样一个需求:
设计的模板要求单元格宽高固定,但客户在使用模板填报时发现,文本较多时单元格不能完全显示足够的文本(有一部分文本被隐藏)。
需求为:单元格内文本能够完全显示。

这其实是一个较常见的场景,客户在设计模板时,尽管已经考虑到文本字数,预留了一定的空间,但还是会有文本较长的特殊情况。
针对这种情况,目前有两种解决方案:
1、适当调整文本所在单元格的高度。(适用场景:严格要求字体大小,对模板单元格高度要求不太严格,允许适当调整行高)
2、调整单元格文本的字体大小。(适用场景:严格要求单元格高度,对字体大小要求不严格)

不管是哪种方案,核心之处就在于,如何判断单元格文本的高度超过了单元格高度呢?
(如下图:单元格文本高度超过了单元格高度)


整体思路如下:
1. 获取目标单元格的列宽(cw)行高(rh)文本内容(v1)
2.新建sheet,设置某一个单元格的列宽为1中获取的目标单元格的列宽(cw),单元格赋值为v1
3.设置该单元格 自适应高度,获取该高度(autoFitRh)
4. 如果 autoFitRh > rh ,适当调整目标单元格行高(rh*系数) 或者 调整单元格字体大小


附件为示例demo,大家可以下载参考下。



页: [1]
查看完整版本: SpreadJS实现单元格文本完全显示