如何实现横向排版/三联类的模板？

收藏

本帖最后由 xcymoo 于 2023-10-8 11:51 编辑

在一些应用场景中，会有类似于这种横向排版的需求：

最终这个界面需要用A4纸张打印出来，并沿虚线剪开，分发给不同的对象。

我将这种类型的需求称为“三联”类型，这种三联需求的关键点在于以下几点：

1. 部分单元格需要同时绑定多个字段，并将其组合为一段文字，如A3、J5等。

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

先来看一下最终的实现效果吧：

[mp4]https://videos.grapecity.com.cn/SpreadJS/online/demos/horizontal-layout.mp4[/mp4]

下面简单讲一下这两个难点如何实现。

1. 如何在同一个单元格绑定多个字段，并将其组合为一段文字

这个案例中，这种单元格共有两种，我分别用黄色和蓝色的背景色标示，它们都绑定了多个字段，比如说黄色单元格，绑定了年月日、子女姓名、学校名等多个字段。

由于设计器界面提供的数据绑定只能在一个单元格绑定一个字段，如果想绑定一个对象，则必须用代码设置。

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

2. 第二、三联中，可变高度的单元格，变化高度后，如何做到不影响第一联？

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

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

代码如下：

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

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

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

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

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

最后，针对此Demo，还要做一个说明：我们无需在每次填报时都设置单元格类型、需移动区域，因为这些信息都存储在模板sheet的tag中了，填报时只需要加载模板，载入数据源后执行固定的换行逻辑即可。

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

0 个回复