本文由葡萄城技术团队原创并首发。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

前言

在一些报表打印应用场景中,会有类似于如下图所示的排版格式:

一般情况下将这种类型的需求称为“三联”类型,这种三联需求的关键点在于以下两点:

1. 部分单元格需要同时绑定多个字段,并将其组合为一段文字,比如上图中的义务教育入学报道单和义务教育入学通知书下方的两段话,它们包含了日期信息和学校名称信息。

2. 其中一联的部分内容的高度是可变的,比方说上图中,第二、三联中间的那一段话的长度是不确定的,因此它所占据的单元格行数也是不确定的。

下面小编就将为分别为大家介绍如何实现上面两点需求:

1. 同一个单元格绑定多个字段

以上述应用场景为例,小编分别用黄s色和蓝色的背景色表示义务教育入学报道单和义务教育入学通知书下方的两段话,它们都绑定了多个字段。

使用代码实现将数据对象绑定在一个单元格内:

同时,使用自定义单元格来实现文本的拼接:

完整代码可以点击这里:https://docs.grapecity.com.cn/spreadjs/practice/data-binding/...

2. 改变第二、三联的单元格,并不影响第一联的内容。

这里的思路不是插入新的行,而是将第三联下方的单元格向下移动,于是这里便需要做两件事,第一,记录需要向下移动的区域;第二,计算要向下移动几行。

关于第一点,可以选中区域,并使用上方的按钮来设置需要向下移动的区域,将其记录在tag中:

代码如下:

而第二点,则稍微有点麻烦,因为真实的文本需要几行单元格展示,不仅和文字的长度有关,还与单元格的宽度(考虑到单元格是合并的,这里需要分开计算并相加)、字体的大小都有关系:

计算文本长度时,使用canvas的measureText方法即可,需要将canvas的字体设置为和表单中一致,文本存在自定义单元格的实例中,直接获取即可:

最后,使用计算出来的diff,扩大单元格合并的范围,并向下移动对应行数即可:

这里要先移除合并单元格,再重新添加一次。

至此,核心的功能就完成了。

总结

以上就是在Excel中实现横向排版/三联类的模板的方法介绍。如果您想了解完整代码,可以访问下列Gitee/Github地址:

https://gitee.com/GrapeCity/typesetting_triple

https://github.com/GrapeCityXA/typesetting_triple

无论是初学者还是有经验的专业人士,都将为您提供有价值的指导和帮助。

扩展链接:

从表单驱动到模型驱动,解读低代码开发平台的发展趋势

低代码开发平台是什么?

基于分支的版本管理,帮助低代码从项目交付走向定制化产品开发


葡萄城技术团队
2.7k 声望29.1k 粉丝

葡萄城是专业的软件开发技术和低代码平台提供商,聚焦软件开发技术,以“赋能开发者”为使命,致力于通过表格控件、低代码和BI等各类软件开发工具和服务,一站式满足开发者需求,帮助企业提升开发效率并创新开发模式。