基于Web的电子模版设计方法、系统、设备及存储介质与流程

基于web的电子模版设计方法、系统、设备及存储介质
技术领域：
：1.本技术属于电子文档设计
技术领域：
：，具体涉及基于web的电子模版设计方法、系统、设备及存储介质。
背景技术：
：：2.随着互联网的普及，越来越多行业的业务都趋于电子化，例如财务板块的电子回单和对账单的电子化。应用场景如各个银行基于互联网的saas平台中，电子回单和对账单的电子文件生成服务，可以实现银行服务最重要凭证的无纸化、降低银行成本以及大大提升数据的使用效率的作用。3.例如ofd（openfixed-layoutdocument）是一种电子文件的格式。在生成ofd回单和对账单过程中，首先要根据各个银行现有的纸质单据（每个银行可能有多种）的样式，灵活方便的设计出凭证、单据的电子模版，在遇到具体业务数据后，可在后台利用电子模版（套版）快速生成一个ofd实例文件。因此，ofd模版设计属于整个电子化流程比较核心的功能。4.但目前的模版设计要么通过整张页面标记为表格，会导致页面利用率低；要么通过对模版对象一一标记实现，但会导致人工工作量繁琐、出错率高的问题。5.上述陈述仅用于提供与本技术有关的
背景技术：
：信息，除非在此指出，否则在本部分中描述的内容对于本技术其它部分内容而言不是现有技术。技术实现要素：6.本发明提出的基于web的电子模版设计方法、系统、电子模版设计器及存储介质，提供了在面向电子回单和对账单的电子文件生成服务时，针对电子回单和对账单存在多个重复性对象的特点，进行表格类数据的针对性电子模版设计，大大降低了电子模版设计过程的复杂度，提高了设计效率并降低了人力成本。7.根据本技术实施例的第一个方面，提供了一种基于web的电子模版设计方法，包括：基于web接收电子模版设计指令进入模版设计界面，获取鼠标的选定数据并确定模版当前选定的框选区域；根据框选区域的属性确定框选区域内的至少一个控件，并标记控件；被标记的至少一个控件构成当前重复组；根据当前选定的框选区域以及浮窗大小，确定当前菜单项浮窗的位置并显示菜单项浮窗；菜单项浮窗包括至少一个菜单项，菜单项用于选定后对当前重复组的所有控件进行组合、解除组合以及位置调整操作；结合表格线，通过重复组属性界面接收重复组的属性，并结合表格线进行重复组的模版设计；重复组的属性用于确定重复组的重复数量以及重复组在模版页面的排版方式；表格线用于对一个重复组进行划分和位置限定。8.在本技术一些实施方式中，获取鼠标的选定数据并确定模版当前选定的框选区域，包括：建立鼠标点击监听事件获取鼠标点击时的初始坐标；建立鼠标移动监听事件获取在按住鼠标同时移动鼠标结束后的终点坐标；结束监听事件，根据初始坐标和终点坐标确定当前选定的框选矩形区域，并在模版设计界面显示框选矩形区域。9.在本技术一些实施方式中，根据框选区域的属性确定框选区域内的至少一个控件，并标记控件，包括：根据框选区域的属性确定框选区域的四个边界值；依次判断模版内每一个控件的位置坐标是否都在四个边界值内；若是，则标记控件。10.在本技术一些实施方式中，根据当前选定的框选区域以及浮窗大小，确定当前菜单项浮窗的位置并显示菜单项浮窗，包括：获取预先设定的浮窗大小的浮窗数据；根据浮窗大小以及模版设计界面大小，确定距离当前选定的框选区域左侧、右侧、上侧或者下侧一定距离的区域为当前菜单项浮窗的位置，显示菜单项浮窗。11.在本技术一些实施方式中，菜单项用于选定后对当前重复组的所有控件进行组合、解除组合以及位置调整操作，包括：通过菜单项接收鼠标点击选定操作，并控制当前重复组的所有控件实现菜单项的属性功能进而调整位置；菜单项的属性功能包括左对齐、居中对齐、右对齐、顶部对齐、底部对齐、页面水平居中、页面垂直居中、等宽，等高、水平均匀分布以及垂直均匀分布中至少一种操作；通过菜单项中的组合菜单控制当前重复组的所有控件实现组合为一个整体对象的功能或解除组合的功能。12.在本技术一些实施方式中，通过重复组属性界面接收重复组的属性进行重复组的模版设计，包括：控制当前重复组的所有控件组合为一个整体对象；确定多条表格线的位置；表格线根据当前重复组内控件排列方式形成行表格线或者列表格线；通过重复组属性界面接收当前重复组的重复数量以及控件间距，在多条表格线之间生成指定重复数量的重复组。13.在本技术一些实施方式中，结合表格线，通过重复组属性界面接收重复组的属性进行重复组的模版设计，包括：确定当前重复组的当前表格线的位置；控制当前重复组内所有控件以及当前表格线组合为一个整体对象；通过重复组属性界面接收当前重复组的重复数量以及控件间距，生成指定重复数量的重复组以及指定重复数量的表格线。14.根据本技术实施例的第二个方面，提供了一种基于web的电子模版设计系统，包括：框选模块：用于基于web接收电子模版设计指令进入模版设计界面，获取鼠标的选定数据并确定模版当前选定的框选区域；确定控件模块：用于根据框选区域的属性确定框选区域内的至少一个控件，并标记控件；被标记的至少一个控件构成当前重复组；浮窗模块：用于根据当前选定的框选区域以及浮窗大小，确定当前菜单项浮窗的位置并显示菜单项浮窗；菜单项浮窗包括至少一个菜单项，菜单项用于选定后对当前重复组的所有控件进行组合、解除组合以及位置调整操作；重复组设计模块：用于通过重复组属性界面接收重复组的属性，并结合表格线进行重复组的模版设计；重复组的属性用于确定重复组的重复数量以及重复组在模版页面的排版方式；表格线用于对一个重复组进行划分和位置限定。15.根据本技术实施例的第三个方面，提供了一种电子模版设计器，包括：存储器，用于存储可执行指令；以及处理器，用于与存储器连接以执行可执行指令从而完成基于web的电子模版设计方法。16.根据本技术实施例的第四个方面，提供了一种计算机可读存储介质，其上存储有计算机程序；计算机程序被处理器执行以实现基于web的电子模版设计方法。17.采用本技术的基于web的电子模版设计方法、系统、电子模版设计器及存储介质，通过基于web接收电子模版设计指令进入模版设计界面，获取鼠标的选定数据并确定模版当前选定的框选区域；根据框选区域的属性确定框选区域内的至少一个控件，并标记控件；被标记的至少一个控件构成当前重复组；根据当前选定的框选区域以及浮窗大小，确定当前菜单项浮窗的位置并显示菜单项浮窗；菜单项浮窗包括至少一个菜单项，菜单项用于选定后对当前重复组的所有控件进行组合、解除组合以及位置调整操作；通过重复组属性界面接收重复组的属性，并结合表格线进行重复组的模版设计；重复组的属性用于确定重复组的重复数量以及重复组在模版页面的排版方式；表格线用于对一个重复组进行划分和位置限定。本技术提供了在面向电子回单和对账单的电子文件生成服务时，针对电子回单和对账单存在多个重复性对象的特点，进行表格类数据的针对性电子模版设计，通过界面可视化操作，大大降低了操作的复杂度，减少了操作的次数，弥补了目前针对重复组设计的设计空白提高了设计效率并降低了人力成本。18.另外，本技术还具有技术效果：1）在直观的界面化框选组件时，通过鼠标直接框选组件实现重复组的选中，相比传统方案逐个去设定组件属性来看，本技术大大提升了用户的使用体验和操作效率。2）在精细化排版布局时，实现了浮窗菜单位置为优化计算，填补了目前领域内重复组细节化控制的空白，解决了用户只能靠修改组件坐标来实现细节化控制的痛点，而且精细化的排版布局不仅可以使用ofd模版设计器，还可以用于其他同场景下的模版设计应用，例如pdf（portabledocumentformat）电子文档。3）在设计重复组时，可选两个重复组方案，可以根据重复组的使用便捷与不同的场景需求进行选择，更准确的帮助用户完成模版设计。4）重复组不仅大大简化了设计工作，提高了设计效率，同时不再需要将整页标记为表格模版，允许在一页纸内重复组和非重复组内容同时存在，在设计上提高了纸张的利用率。19.总之，本技术不仅改善了例如ofd格式的表格类数据模版化生成的复杂设计问题，还极大的提升了电子文件在金融行业中的应用价值，后端根据模版生成的文件包括但不限于ofd、pdf等电子文件格式。附图说明20.此处所说明的附图用来提供对本技术的进一步理解，构成本技术的一部分，本技术的示意性实施例及其说明用于解释本技术，并不构成对本技术的不当限定。在附图中：图1中示出了根据常规电子模版的设计示意图；图2中示出了根据现有电子模版中重复组的设计示意图；图3中示出了根据本技术实施例的基于web的电子模版设计方法的步骤示意图；图4中示出了根据本技术实施例的框选区域的步骤示意图；图5中示出了根据本技术实施例的设计重复组的步骤示意图一；图6中示出了根据本技术实施例的设计重复组的步骤示意图二；图7中示出了根据本技术实施例的生成矩形框选区域的计算流程图；图8中示出了根据本技术实施例的显示并选定矩形框选区域的示意图；图9中示出了根据本技术实施例的矩形框选区域内控件的判断流程图；图10中示出了根据本技术实施例的浮窗中菜单项示意图；图11中示出了根据本技术实施例的用户画出所有的表格线的模版示意图；图12中示出了根据本技术实施例的重复组属性设置面板的示意图；图13中示出了根据本技术实施例的用户画部分表格线的模版示意图；图14中示出了根据本技术实施例的基于web的电子模版设计系统的结构示意图；图15中示出了根据本技术实施例的电子模版设计器的结构示意图。具体实施方式21.关于本技术，面向电子回单和对账单的电子文件生成服务方向，ofd（openfixed-layoutdocuments）版式文档是版面呈现效果高度精确固定的电子文件，与pdf文件相仿，具有格式独立、版面固定、固化呈现等特点。基于电子回单和对账单等表格类数据的特点，其存在多个重复性对象，这个对象可以是多个相同或不同的数据类型构成的对象。22.在ofd模版设计器中，大多数数据类型可以直接通过拖动其对应的组件来实现设计。但上述指出的重复性对象的泛型数据无法通过直接拖拽组件来实现，这也是模版设计器的难点。这类重复性对象泛型数据的特点是本身不属于某一个固定的数据类型而是多个数据类型的组合体，而且这个组合体需要重复出现，本技术把这类重复出现的组合体或重复性对象，叫做重复组。23.如图1所示，常规电子模版的设计示意图中，框内标记的行就是一个重复组。这个重复组的数据类型由每一列的多个控件的数据类型组成。重复组的定义在模版设计中非常重要，它将散列的、重复出现的多个相同或不同的数据类型抽象成一个整体对象来处理，使用户在表格模版设计时不需要再对每列控件挨个进行处理，而是作为一个整体进行处理。24.重复组的最主要应用场景就是上述实现表格类数据的模版设计。本技术把表格模版设计拆解成行或列来实现：表格就是行的重复或者列的重复，每一行/列数据是一个多数据类型的组合体。25.图2中示出了根据现有电子模版中重复组的设计示意图。26.但是，如何实现重复组的模版设计是一个行业难题，一般的做法是要么如图2所示采用整张页面标记为表格的方式，但会导致设计页面利用率非常低。要么通过属性面板里面对每个“重复组控件”进行标记。这种属性标记的做法虽然也能实现重复组控件的基本功能，但是这种实现方式操作起来很繁琐。举个例子：有一个20列的表格，按照一般做法需要在20个控件的属性面板里分别进行重复组标记，大量繁琐的操作会增加模版设计过程出错的风险，而且缺失重复组控件进行细节控制的布局功能：统一高度、统一宽度、排列、对齐、分布、移动和删除等。如果硬要在每个控件属性里面再去修改坐标来实现上述缺失功能，对于操作人员来说无疑是个噩梦。还有一种思路是实现类似于excel那样的表格的方式，通过excel的表格重复实现列表数据的重复。但是要在web端或客户端上实现excel的表格和单元格效果，工作量非常巨大。27.因此，目前类似的重复组的模版设计中，要么整张页面标记为表格，页面利用率低；要么通过重复组标记实现，但是人工工作量繁琐、出错率高。28.本发明为了解决如ofd模版设计器里如何实现重复组在模版中的设计问题，在面向电子回单和对账单的电子文件生成服务时，针对电子回单和对账单存在多个重复性对象的特点，进行表格类数据的针对性电子模版设计，大大降低了电子模版设计过程的复杂度，提高了设计效率并降低了人力成本。29.重复组不仅大大简化了设计工作，提高了设计效率，同时不再需要将整页标记为表格模版，允许在一页纸内重复组和非重复组内容同时存在，在设计上提高了纸张的利用率。30.具体的，本技术的基于web的电子模版设计方法、系统、电子模版设计器及存储介质，通过基于web接收电子模版设计指令进入模版设计界面，获取鼠标的选定数据并确定模版当前选定的框选区域；根据框选区域的属性确定框选区域内的至少一个控件，并标记控件；被标记的至少一个控件构成当前重复组；根据当前选定的框选区域以及浮窗大小，确定当前菜单项浮窗的位置并显示菜单项浮窗；菜单项浮窗包括至少一个菜单项，菜单项用于选定后对当前重复组的所有控件进行组合、解除组合以及位置调整操作；结合表格线，通过重复组属性界面接收重复组的属性进行重复组的模版设计；重复组的属性用于确定重复组的重复数量以及重复组在模版页面的排版方式；表格线用于对一个重复组进行划分和位置限定。31.本技术提供了在面向电子回单和对账单的电子文件生成服务时，针对电子回单和对账单存在多个重复性对象的特点，进行表格类数据的针对性电子模版设计，大大降低了电子模版设计过程的复杂度，提高了设计效率并降低了人力成本。32.为了使本技术实施例中的技术方案及优点更加清楚明白，以下结合附图对本技术的示例性实施例进行进一步详细的说明，显然，所描述的实施例仅是本技术的一部分实施例，而不是所有实施例的穷举。需要说明的是，在不冲突的情况下，本技术中的实施例及实施例中的特征可以相互组合。33.实施例1图3中示出了根据本技术实施例的基于web的电子模版设计方法的步骤示意图。34.如图3所示，本技术实施例的基于web的电子模版设计方法包括以下步骤：s1：首先，基于web接收电子模版设计指令进入模版设计界面，获取鼠标的选定数据并确定模版当前选定的框选区域。35.图4中示出了根据本技术实施例的框选区域的步骤示意图。36.具体实施时，如图4所示，包括：s11：建立鼠标点击监听事件获取鼠标点击时的初始坐标；s12：建立鼠标移动监听事件获取在按住鼠标同时移动鼠标结束后的终点坐标；s13：结束监听事件，根据初始坐标和终点坐标确定当前选定的框选矩形区域，并在模版设计界面显示框选矩形区域。37.s2：根据框选区域的属性确定框选区域内的至少一个控件，并标记控件；被标记的至少一个控件构成当前重复组。38.优选实施时，首先，根据框选区域的属性确定框选区域的四个边界值；然后，依次判断模版内每一个控件的位置坐标是否都在四个边界值圈定的范围内；若是，则标记控件。例如，控件a的位置坐标包括控件a四个边界的数值，分别判断控件a顶部边界值是否小于框选区域顶部边界值、控件a底部边界值是否大于框选区域底部边界值、控件a左侧边界值是否大于框选区域左侧边界值以及控件a右侧边界值是否小于框选区域右侧边界值。39.s3：根据当前选定的框选区域以及浮窗大小，确定当前菜单项浮窗的位置并显示菜单项浮窗；菜单项浮窗包括至少一个菜单项，菜单项用于选定后对当前重复组的所有控件进行组合、解除组合以及位置调整操作。40.其中，确定当前菜单项浮窗的位置时，首先，获取预先设定浮窗大小的浮窗数据；然后，根据浮窗大小以及模版设计界面大小，确定距离当前选定的框选区域左侧、右侧、上侧或者下侧一定距离的区域为当前菜单项浮窗的位置，显示菜单项浮窗。41.其中，菜单项用于选定后对当前重复组的所有控件进行组合、解除组合以及位置调整操作，包括：通过菜单项接收鼠标点击选定操作，并控制当前重复组的所有控件实现菜单项的属性功能进而调整位置；菜单项的属性功能包括左对齐、居中对齐、右对齐、顶部对齐、底部对齐、页面水平居中、页面垂直居中、等宽、等高、水平均匀分布以及垂直均匀分布中至少一种操作；以及，通过菜单项中的组合菜单控制当前重复组的所有控件实现组合为一个整体对象的功能或解除组合的功能。42.s4：通过重复组属性界面接收重复组的属性，并结合表格线进行重复组的模版设计；重复组的属性用于确定重复组的重复数量以及重复组在模版页面的排版方式；表格线用于对一个重复组进行划分和位置限定。43.图5中示出了根据本技术实施例的设计重复组的步骤示意图一。44.如图5所示，s4具体实施时，包括方案一：s41：控制当前重复组的所有控件组合为一个整体对象；s42：确定多条表格线的位置；表格线根据当前重复组内控件排列方式形成行表格线或者列表格线；s43：通过重复组属性界面接收当前重复组的重复数量以及控件间距，在多条表格线之间生成指定重复数量的重复组。45.图6中示出了根据本技术实施例的设计重复组的步骤示意图二。46.如图6所示，s4具体实施时，包括方案二：s410：确定当前重复组的当前表格线的位置；s420：控制当前重复组内所有控件以及当前表格线组合为一个整体对象；s430：通过重复组属性界面接收当前重复组的重复数量以及控件间距，生成指定重复数量的重复组以及指定重复数量的表格线。47.为了进一步阐述本技术实施例方案，以下通过具体实施场景步骤进行说明。48.本技术实施例主要通过设计重复组的功能来实现对重复数据的布局和展示。具体，通过浮窗菜单实现对重复组内控件的精细化控制，在属性面板可以设定重复组的关键属性，使重复组的设定由一般属性标记的做法改成了界面可视化操作，大大降低了操作的复杂度，减少了操作的次数，解决了表格数据设计的难题，弥补了重复组设计空白。49.本技术实施例主要分为以下三个步骤完成。50.第一步：实现框选组件的功能，可视化的批量组件选择。51.实现框选组件的功能又分为两步：①根据鼠标操作生成框选区域，②判定框选区域内的控件。52.①根据鼠标操作生成矩形框选区域：框选一个区域，要求用户先点击鼠标左键，然后移动鼠标选取一个范围。53.首先，在画板中建立鼠标左键点击监听事件—drawdesk_mousedown，并在鼠标左键点击时记录鼠标当前坐标。54.然后，建立鼠标移动监听事件drawdesk_mousemove，在按住鼠标左键的同时移动鼠标结束后记录鼠标当前坐标——终点坐标，并在鼠标释放时注销drawdesk_mousemove事件。55.这样就有了初始坐标和鼠标移动结束的终点坐标，我们可以得到一个框选矩形区域（向用户展示当前的框选范围）。56.图7中示出了根据本技术实施例的生成矩形框选区域的计算流程图。图8中示出了根据本技术实施例的显示并选定矩形框选区域的示意图。57.如图7所示，先鼠标左键点击时获取初始坐标a（x1，y1），鼠标拖动结束后获取终点坐标b（x2，y2）；考虑到鼠标拖动窗口的情况，增加获取窗口文档垂直方向、水平方向的滚动值的步骤；基于坐标a（x1，y1）、b（x2，y2）以及滚动值的一系列如图运算确定矩形框选区域的坐标数值。58.最后，如图8所示为向用户显示计算后得到的框选区域。59.②判定框选区域内的所有控件。有了①计算出来的矩形框选区域，就可以判断哪些控件在框选区域内。60.图9中示出了根据本技术实施例的矩形框选区域内控件的判断流程图。61.判断方法如图9所示，输入当前控件cptdom，然后获取框选区域drawrect，然后判断取框选区域drawrect的底部值是否大于控件cptdom的底部值，其他三个边如顶部、左侧、右侧类似的判断条件；当都达到要求时，判断当前控件cptdom在框选区域内。62.最后，识别出哪些控件被用户的框选中，并对这些选中的控件进行标记，以方便后续进行组合形成整体的重复组。63.第二步：通过浮窗对选中的控件进行精细化控制。主要包括：1、浮窗菜单的位置显示和2、菜单项功能两个部分。64.图10中示出了根据本技术实施例的浮窗中菜单项示意图。65.如图10所示，菜单项功能包括：左对齐、居中对齐、右对齐、顶部对齐、底部对齐、页面水平居中、页面垂直居中、等宽、等高、水平均匀分布、垂直均匀分布等细节功能。66.1、浮窗菜单的位置显示。67.浮窗菜单的位置显示由用户当前选中的控件位置和浮窗菜单自身的宽度和高度决定。在标记处用户选中的控件后，需要用到被选择控件中最小的xmin坐标和ymin坐标和最大的xmax坐标，以及预先设定的浮窗菜单自身的宽度widthmenu和高度heightmenu，当浮窗菜单自身的宽度小于最小x坐标到最大x坐标距离的一半时：计算公式：widthmenu《=（xmax‑ꢀxmin）/2；浮窗菜单的xmenu为（xmax‑ꢀxmin）/4，浮窗菜单的ymenu为ymin-5px；当浮窗菜单自身的宽度大于最小x坐标到最大x坐标距离的一半时：计算公式：widthmenu》（xmax‑ꢀxmin）/2；浮窗菜单的xmenu为xmin-5px，浮窗菜单的ymenu为ymin-5px；其中，px为像素单位。68.通过以上计算，便可以使浮窗菜单始终显示在选中控件后的一个后继操作恰当的位置。69.2、菜单项功能。70.关于左对齐：点击该菜单功能项后，将计算出所有控件中的最小x坐标——xmin。将所有控件的x坐标重置为xmin。71.关于居中对齐：点击该菜单功能项后，将计算出所有控件中的最小x坐标——xmin和最大x坐标xmax，将所有控件的x坐标重置为（xmax-xmin）/2。72.关于顶部对齐：点击该菜单功能项后，将计算出所有控件中的最小y坐标——ymin，将所有控件的y坐标重置为ymin。73.关于底部对齐：点击该菜单功能项后，将计算出所有控件中的最大y坐标——ymax，将所有控件的y坐标重置为ymax。74.关于右对齐：点击该菜单功能项后，将计算出所有控件中的最大x坐标——xmax。将所有控件的x坐标重置为xmax。75.关于页面水平居中：点击该菜单功能项后，将根据画板的宽度计算出画板的中间坐标（xmiddle，ymiddle）。将所有控件的x坐标重置为中间坐标减去控件宽度的一半，即：xmiddle‑ꢀwidthcpt/2。76.关于页面垂直居中：点击该菜单功能项后，将根据画板的宽度计算出画板的中间坐标（xmiddle，ymiddle）。将所有控件的x坐标重置为中间坐标减去控件高度的一半，即：ymiddle‑ꢀheightcpt/2。77.关于水平均匀分布：点击该菜单功能项后，将计算出所有控件中的最小x坐标——xmin和最大x坐标xmax，用两者之和除以（控件数量-1）计算出水平方向均匀分布的间距px=（xmax-xmin）/(countcpt-1)。xmin最小的控件位置不变，其余控件x坐标依大小次序叠加均匀分布的间距px。78.关于垂直均匀分布：点击该菜单功能项后，将计算出所有控件中的最小y坐标——ymin和最大y坐标ymax，用两者之和除以（控件数量-1）计算出水平方向均匀分布的间距py=（ymax-ymin）/(countcpt-1)。ymin最小的控件位置不变，其余控件y坐标依大小次序叠加均匀分布的间距py。79.第三步：设置重复组。80.在第二步完成了选中控件的精细化操作之后，就可以开始设置重复组。81.本技术实施例在设置重复组的具体实现上有两种方案来实现。这两种方案对于不用画表格线的实现是一样的，差别在于对画表格线的实现方案。这里我们针对画表格线的重复组实现方案进行说明：图11中示出了根据本技术实施例的用户画出所有的表格线的模版示意图。82.如图11所示，第一种方案：用户按照前两个步骤完成控件选中后，点击组合即可完成重复组设定，重复组采用蓝色虚线框标识。接着用户需要画出所有的表格线。当然，如果客户不要求表格线，当然也无需表格线。83.图12中示出了根据本技术实施例的重复组属性设置面板的示意图。84.如图12所示的重复组属性设置面板中，还可以设置重复组的属性：行重复还是列重复，重复间隔，重复生成截止的长度范围。85.在这种模式下，各个行重复数据之间的行间距或者列重复数据之间的列间距是约定好的。后端的ofd生成服务收到该模版后，将根据模版中提供的重复组组件和对应的参数如行间距、列间距等，使用业务数据填充空白的行或列，重复生成ofd文件的多个页面。第一种方案所见即所得，用户可以实现强定义自己所需要的表格线模版。这种方案比较适用于重复组数据的同一个字段字数变化不大的情况，同时生成服务的计算量较小，速度快。86.图13中示出了根据本技术实施例的用户画部分表格线的模版示意图。87.如图13所示，第二种方案与第一种方案不同的地方是，第二种方案不需要用户画出全部的表格线，只需要用户画出一行或一列数据的表格线，并连同动态控件一起选中，点击组合将表格线与动态控件一起设定为重复组。88.同时在如图12所示的重复组属性设置面板中，还可以设置重复组的属性：行重复还是列重复，重复生成截止的长度范围等。89.这两种方案的重复组设计时，第一种因为预先画好表格线固定位置，所以重复组之间是固定间距；后者第二种方案之间的行或列的间距是不固定的，高度或宽度根据内容自适应调整。90.后端的ofd生成服务收到模版和业务数据后，将根据模版中提供的重复组和对应的参数，根据每行（每列，下同）的业务数据，自适应的调整行间距。例如：对于某些文字很多的字段自动拉升行高以完整显示；同时根据各页可容纳的行数，自动计算需要多少页才能完整显示所有业务数据。对于那些行之间需要表格线分隔的，也根据模版的线的位置，自动在每行加上表格线。第二种方案中用户不再需要画出这么多的表格线，表格线由ofd生成服务动态生成，而且在数据高度撑开行高时，可以做到表格线位置的自适应。这种方法适用于重复组数据的同一个字段的字数变化较大的情形，但需要比较大的实时计算资源，对生成速度有一定影响。91.本技术实施例提出的重复组的设计方案，不限于ofd等电子单证领域，在其他领域比如多页报表设计等，专业领域人员无需经过创造性思维也均可使用该方案实现重复数据的布局和展示，此类应用均属于本技术保护范围。92.采用本技术的基于web的电子模版设计方法，通过基于web接收电子模版设计指令进入模版设计界面，获取鼠标的选定数据并确定模版当前选定的框选区域；根据框选区域的属性确定框选区域内的至少一个控件，并标记控件；被标记的至少一个控件构成当前重复组；根据当前选定的框选区域以及浮窗大小，确定当前菜单项浮窗的位置并显示菜单项浮窗；菜单项浮窗包括至少一个菜单项，菜单项用于选定后对当前重复组的所有控件进行组合、解除组合以及位置调整操作；通过重复组属性界面接收重复组的属性，并结合表格线进行重复组的模版设计；重复组的属性用于确定重复组的重复数量以及重复组在模版页面的排版方式；表格线用于对一个重复组进行划分和位置限定。本技术提供了在面向电子回单和对账单的电子文件生成服务时，针对电子回单和对账单存在多个重复性对象的特点，进行表格类数据的针对性电子模版设计，通过界面可视化操作，大大降低了操作的复杂度，减少了操作的次数，弥补了目前针对重复组设计的设计空白。另外，本技术还具有技术效果：1）在直观的界面化框选组件时，通过鼠标直接框选组件实现重复组的选中，相比传统方案逐个去设定组件属性来看，本技术大大提升了用户的使用体验和操作效率。2）在精细化排版布局时，实现了浮窗菜单位置为优化计算，填补了目前领域内重复组细节化控制的空白，解决了用户只能靠修改组件坐标来实现细节化控制的痛点，而且精细化的排版布局不仅可以使用ofd模版设计器，还可以用于其他同场景下的模版设计应用，例如pdf（portabledocumentformat）电子文档。3）在设计重复组时，可选两个重复组方案，可以根据重复组的使用便捷与不同的场景需求进行选择，更准确的帮助用户完成模版设计。4）重复组不仅大大简化了设计工作，提高了设计效率，同时不再需要将整页标记为表格模版，允许在一页纸内重复组和非重复组内容同时存在，在设计上提高了纸张的利用率。93.总之，本技术不仅改善了例如ofd格式的表格类数据模版化生成的复杂设计问题，还极大的提升了电子文件在金融行业中的应用价值，后端根据模版生成的文件包括但不限于ofd、pdf等电子文件格式。94.实施例2本实施例提供了一种基于web的电子模版设计系统，对于本实施例的基于web的电子模版设计系统中未披露的细节，请参照其它实施例中的基于web的电子模版设计方法的具体实施内容。95.图14中示出了根据本技术实施例的基于web的电子模版设计系统的结构示意图。96.如图14所示，基于web的电子模版设计系统，包括框选模块10、确定控件模块20、浮窗模块30以及重复组设计模块40。97.具体的，框选模块10：用于基于web接收电子模版设计指令进入模版设计界面，获取鼠标的选定数据并确定模版当前选定的框选区域。98.具体实施时，包括：建立鼠标点击监听事件获取鼠标点击时的初始坐标；建立鼠标移动监听事件获取在按住鼠标同时移动鼠标结束后的终点坐标；结束监听事件，根据初始坐标和终点坐标确定当前选定的框选矩形区域，并在模版设计界面显示框选矩形区域。99.确定控件模块20：用于根据框选区域的属性确定框选区域内的至少一个控件，并标记控件；被标记的至少一个控件构成当前重复组。100.优选实施时，首先，根据框选区域的属性确定框选区域的四个边界值；然后，依次判断模版内每一个控件的位置坐标是否都在四个边界值圈定的范围内；若是，则标记控件。101.浮窗模块30：用于根据当前选定的框选区域以及浮窗大小，确定当前菜单项浮窗的位置并显示菜单项浮窗；菜单项浮窗包括至少一个菜单项，菜单项用于选定后对当前重复组的所有控件进行组合、解除组合以及位置调整操作。102.其中，确定当前菜单项浮窗的位置时，首先，获取预先设定浮窗大小的浮窗数据；然后，根据浮窗大小以及模版设计界面大小，确定距离当前选定的框选区域左侧、右侧、上侧或者下侧一定距离的区域为当前菜单项浮窗的位置，显示菜单项浮窗。103.其中，菜单项用于选定后对当前重复组的所有控件进行组合、解除组合以及位置调整操作，包括：通过菜单项接收鼠标点击选定操作，并控制当前重复组的所有控件实现菜单项的属性功能进而调整位置；菜单项的属性功能包括左对齐、居中对齐、右对齐、顶部对齐、底部对齐、页面水平居中、页面垂直居中、等宽，等高、水平均匀分布以及垂直均匀分布中至少一种；以及，通过菜单项中的组合菜单控制当前重复组的所有控件实现组合为一个整体对象的功能或解除组合的功能。104.重复组设计模块40：用于通过重复组属性界面接收重复组的属性进行重复组的模版设计；重复组的属性用于确定重复组的重复数量以及重复组在模版页面的排版方式；表格线用于对一个重复组进行划分和位置限定。105.采用本技术的基于web的电子模版设计系统，通过框选模块10基于web接收电子模版设计指令进入模版设计界面，获取鼠标的选定数据并确定模版当前选定的框选区域；确定控件模块20根据框选区域的属性确定框选区域内的至少一个控件，并标记控件；被标记的至少一个控件构成当前重复组；浮窗模块30根据当前选定的框选区域以及浮窗大小，确定当前菜单项浮窗的位置并显示菜单项浮窗；菜单项浮窗包括至少一个菜单项，菜单项用于选定后对当前重复组的所有控件进行组合、解除组合以及位置调整操作；重复组设计模块40结合表格线，通过重复组属性界面接收重复组的属性，并结合表格线进行重复组的模版设计；重复组的属性用于确定重复组的重复数量以及重复组在模版页面的排版方式；表格线用于对一个重复组进行划分和位置限定。本技术提供了在面向电子回单和对账单的电子文件生成服务时，针对电子回单和对账单存在多个重复性对象的特点，进行表格类数据的针对性电子模版设计，通过界面可视化操作，大大降低了操作的复杂度，减少了操作的次数，弥补了目前针对重复组设计的设计空白。106.另外，本技术还具有技术效果：1）在直观的界面化框选组件时，通过鼠标直接框选组件实现重复组的选中，相比传统方案逐个去设定组件属性来看，本技术大大提升了用户的使用体验和操作效率。2）在精细化排版布局时，实现了浮窗菜单位置为优化计算，填补了目前领域内重复组细节化控制的空白，解决了用户只能靠修改组件坐标来实现细节化控制的痛点，而且精细化的排版布局不仅可以使用ofd模版设计器，还可以用于其他同场景下的模版设计应用，例如pdf（portabledocumentformat）电子文档。3）在设计重复组时，可选两个重复组方案，可以根据重复组的使用便捷与不同的场景需求进行选择，更准确的帮助用户完成模版设计。107.总之，本技术不仅改善了例如ofd格式的表格类数据模版化生成的复杂设计问题，还极大的提升了电子文件在金融行业中的应用价值，后端根据模版生成的文件包括但不限于ofd、pdf等电子文件格式。108.实施例3本实施例提供了一种电子模版设计器，对于本实施例的电子模版设计器中未披露的细节，请参照其它实施例中的基于web的电子模版设计方法或系统具体的实施内容。109.图15中示出了根据本技术实施例的电子模版设计器400或图像识别设备的结构示意图。110.如图15所示，电子模版设计器400或图像识别设备，包括：存储器402：用于存储可执行指令；以及处理器401:用于与存储器402连接以执行可执行指令从而完成基于web的电子模版设计方法或者图像识别方法。111.本领域技术人员可以理解，示意图15仅仅是电子模版设计器400或图像识别设备的示例，并不构成对电子模版设计器400或图像识别设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如电子模版设计器400还可以包括输入输出设备、网络接入设备、总线等。112.所称处理器401(centralprocessingunit，cpu)，还可以是其他通用处理器、数字信号处理器(digitalsignalprocessor，dsp)、专用集成电路(applicationspecificintegratedcircuit，asic)、现场可编程门阵列(field-programmablegatearray，fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器401也可以是任何常规的处理器等，处理器401是电子模版设计器400的控制中心，利用各种接口和线路连接整个电子模版设计器400的各个部分。113.存储器402可用于存储计算机可读指令，处理器401通过运行或执行存储在存储器402内的计算机可读指令或模块，以及调用存储在存储器402内的数据，实现电子模版设计器400的各种功能。存储器402可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序（比如声音播放功能、图像播放功能等）等；存储数据区可存储根据电子模版设计器400使用所创建的数据等。此外，存储器402可以包括硬盘、内存、插接式硬盘，智能存储卡（smartmediacard，smc），安全数字（securedigital，sd）卡，闪存卡（flashcard）、至少一个磁盘存储器件、闪存器件、只读存储器（read-onlymemory，rom）、随机存取存储器（randomaccessmemory，ram）或其他非易失性/易失性存储器件。114.电子模版设计器400集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机可读指令来指令相关的硬件来完成，的计算机可读指令可存储于一计算机可读存储介质中，该计算机可读指令在被处理器执行时，可实现上述各个方法实施例的步骤。115.实施例5本实施例提供了一种计算机可读存储介质，其上存储有计算机程序；计算机程序被处理器执行以实现其他实施例中的基于web的电子模版设计方法。116.本技术实施例的电子模版设计器及存储介质，通过基于web接收电子模版设计指令进入模版设计界面，获取鼠标的选定数据并确定模版当前选定的框选区域；根据框选区域的属性确定框选区域内的至少一个控件，并标记控件；被标记的至少一个控件构成当前重复组；根据当前选定的框选区域以及浮窗大小，确定当前菜单项浮窗的位置并显示菜单项浮窗；菜单项浮窗包括至少一个菜单项，菜单项用于选定后对当前重复组的所有控件进行组合、解除组合以及位置调整操作；通过重复组属性界面接收重复组的属性，并结合表格线进行重复组的模版设计；重复组的属性用于确定重复组的重复数量以及重复组在模版页面的排版方式；表格线用于对一个重复组进行划分和位置限定。117.本技术提供了在面向电子回单和对账单的电子文件生成服务时，针对电子回单和对账单存在多个重复性对象的特点，进行表格类数据的针对性电子模版设计，通过界面可视化操作，大大降低了操作的复杂度，减少了操作的次数，弥补了目前针对重复组设计的设计空白。118.本领域内的技术人员应明白，本技术的实施例可提供为方法、系统、或计算机程序产品。因此，本技术可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本技术可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质（包括但不限于磁盘存储器、cd-rom、光学存储器等）上实施的计算机程序产品的形式。119.本技术是参照根据本技术实施例的方法、设备（系统）、和计算机程序产品的流程图和／或方框图来描述的。应理解可由计算机程序指令实现流程图和／或方框图中的每一流程和／或方框、以及流程图和／或方框图中的流程和／或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的装置。120.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能。121.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的步骤。122.在本发明使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本发明。在本发明和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。123.应当理解，尽管在本发明可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本发明范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。124.尽管已描述了本技术的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本技术范围的所有变更和修改。125.显然，本领域的技术人员可以对本技术进行各种改动和变型而不脱离本技术的精神和范围。这样，倘若本技术的这些修改和变型属于本技术权利要求及其等同技术的范围之内，则本技术也意图包含这些改动和变型在内。当前第1页12当前第1页12
技术特征：
1.一种基于web的电子模版设计方法，其特征在于，包括：基于web接收电子模版设计指令进入模版设计界面，获取鼠标的选定数据并确定模版当前选定的框选区域；根据所述框选区域的属性确定框选区域内的至少一个控件，并标记所述控件；被标记的至少一个控件构成当前重复组；根据当前选定的框选区域以及浮窗大小，确定当前菜单项浮窗的位置并显示所述菜单项浮窗；所述菜单项浮窗包括至少一个菜单项，所述菜单项用于选定后对所述当前重复组的所有控件进行组合、解除组合以及位置调整操作；通过重复组属性界面接收重复组的属性进行重复组的模版设计；所述重复组的属性用于确定重复组的重复数量以及重复组在模版页面的排版方式。2.根据权利要求1所述的基于web的电子模版设计方法，其特征在于，所述获取鼠标的选定数据并确定模版当前选定的框选区域，包括：建立鼠标点击监听事件获取鼠标点击时的初始坐标；建立鼠标移动监听事件获取在按住鼠标同时移动鼠标结束后的终点坐标；结束监听事件，根据所述初始坐标和终点坐标确定当前选定的框选矩形区域，并在模版设计界面显示所述框选矩形区域。3.根据权利要求1所述的基于web的电子模版设计方法，其特征在于，所述根据所述框选区域的属性确定框选区域内的至少一个控件，并标记所述控件，包括：根据框选区域的属性确定框选区域的四个边界值；依次判断模版内每一个控件的位置坐标是否都在所述四个边界值圈定的范围内；若是，则标记控件。4.根据权利要求1所述的基于web的电子模版设计方法，其特征在于，所述根据当前选定的框选区域以及浮窗大小，确定当前菜单项浮窗的位置并显示所述菜单项浮窗，包括：获取预先设定的浮窗大小的浮窗数据；根据所述浮窗大小以及模版设计界面大小，确定距离当前选定的框选区域左侧、右侧、上侧或者下侧一定距离的区域为当前菜单项浮窗的位置，显示所述菜单项浮窗。5.根据权利要求1所述的基于web的电子模版设计方法，其特征在于，所述菜单项用于选定后对所述当前重复组的所有控件进行组合、解除组合以及位置调整操作，包括：通过菜单项接收鼠标点击选定操作，并控制当前重复组的所有控件实现菜单项的属性功能进而调整位置；菜单项的属性功能包括左对齐、居中对齐、右对齐、顶部对齐、底部对齐、页面水平居中、页面垂直居中、等宽、等高、水平均匀分布以及垂直均匀分布中至少一种操作；通过菜单项中的组合菜单控制当前重复组的所有控件实现组合的功能或解除组合的功能。6.根据权利要求1-5任一项所述的基于web的电子模版设计方法，其特征在于，所述通过重复组属性界面接收重复组的属性进行重复组的模版设计，包括：控制当前重复组的所有控件组合为一个整体对象；确定多条表格线的位置；所述表格线根据当前重复组内控件排列方式形成行表格线或者列表格线；所述表格线用于对一个重复组进行划分和位置限定；
通过重复组属性界面接收当前重复组的重复数量以及控件间距，在所述多条表格线之间生成指定重复数量的重复组。7.根据权利要求1-5任一项所述的基于web的电子模版设计方法，其特征在于，所述通过重复组属性界面接收重复组的属性进行重复组的模版设计，包括：确定当前重复组的当前表格线的位置；所述表格线用于对一个重复组进行划分和位置限定；控制所述当前重复组内所有控件以及当前表格线组合为一个整体对象；通过重复组属性界面接收当前重复组的重复数量以及控件间距，生成指定重复数量的重复组以及指定重复数量的表格线。8.一种基于web的电子模版设计系统，其特征在于，包括：框选模块：用于基于web接收电子模版设计指令进入模版设计界面，获取鼠标的选定数据并确定模版当前选定的框选区域；确定控件模块：用于根据所述框选区域的属性确定框选区域内的至少一个控件，并标记所述控件；被标记的至少一个控件构成当前重复组；浮窗模块：用于根据当前选定的框选区域以及浮窗大小，确定当前菜单项浮窗的位置并显示所述菜单项浮窗；所述菜单项浮窗包括至少一个菜单项，所述菜单项用于选定后对所述当前重复组的所有控件进行组合、解除组合以及位置调整操作；重复组设计模块：用于通过重复组属性界面接收重复组的属性进行重复组的模版设计；所述重复组的属性用于确定重复组的重复数量以及重复组在模版页面的排版方式。9.一种电子模版设计器，其特征在于，包括：存储器，用于存储可执行指令；以及处理器，用于与存储器连接以执行可执行指令从而完成如权利要求1-7任一项所述的方法。10.一种计算机可读存储介质，其特征在于，其上存储有计算机程序；计算机程序被处理器执行以实现如权利要求1-7任一项所述的方法。

技术总结
本申请提供了一种基于Web的电子模版设计方法、系统、设备及存储介质，通过获取鼠标的选定数据并确定模版当前选定的框选区域；根据框选区域的属性确定框选区域内的至少一个控件，构成当前重复组；根据当前选定的框选区域以及浮窗大小，确定当前菜单项浮窗的位置并显示菜单项浮窗；通过重复组属性界面接收重复组的属性进行重复组的模版设计。本申请提供了在面向电子回单和对账单的电子文件生成服务时，针对电子回单和对账单存在多个重复性对象的特点，进行表格类数据的针对性电子模版设计，通过界面可视化操作，大大降低了操作的复杂度，减少了操作的次数，弥补了目前针对重复组设计的设计空白。计空白。计空白。


技术研发人员：郭恒海 郭子华
受保护的技术使用者：北京冠群信息技术股份有限公司
技术研发日：2023.08.31
技术公布日：2023/10/6