公开/公告号CN112800732A
专利类型发明专利
公开/公告日2021-05-14
原文格式PDF
申请/专利权人 武汉晨曦芸峰科技有限公司;
申请/专利号CN202011461487.5
发明设计人 陈涛;
申请日2020-12-08
分类号G06F40/18(20200101);G06F40/183(20200101);G06F16/958(20190101);
代理机构11411 北京联瑞联丰知识产权代理事务所(普通合伙);
代理人黄冠华
地址 430074 湖北省武汉市东湖新技术开发区光谷大道3号激光工程设计总部二期研发楼02幢02单元11层1号
入库时间 2023-06-19 10:58:46
技术领域
本发明涉及一种零代码自定义HTML表单，涉及互联网云平台技术领域，具体涉及一种零代码自定义HTML表单样式的方法。
背景技术
现有互联网云平台上的网页页面开发，大多都需要通过修改代码的方式来改变页面的控件、样式等，云平台在给不同客户服务时，一般客户都会有定制化功能页面的需求，这时就需要多次修改代码来满足不同客户的需求。这种服务模式需要投入额外的人力物力时间金钱等，开发和实施周期长，效率低下。
发明内容
本发明需要解决的技术问题是提供一种零代码自定义HTML表单样式的方法，其中一种目的是为了具备能够简单便捷地通过Word、PowerPoint、Excel 等常用文本和表格、图形编辑软件，快速地依照客户需求定制管理云平台的表单页面，不需要进行代码修改、软件发布等流程，解决互联网云平台上的网页页面开发，大多都需要通过修改代码的方式来改变页面的控件、样式等，云平台在给不同客户服务时，一般客户都会有定制化功能页面的需求，这时就需要多次修改代码来满足不同客户的需求，这种服务模式需要投入额外的人力物力时间金钱等，开发和实施周期长，效率低下问题。
为解决上述技术问题，本发明所采用的技术方案是：
一种零代码自定义HTML表单样式的方法，该零代码自定义HTML表单样式的方法，包括以下步骤：
S1、编辑软件，根据客户的定制化需求设计好基础页面；
S2、设计页面，将设计好的页面样式导出成HTML文件；
S3、显示对比，用浏览器打开刚才导出的HTML，看看显示效果是否与Word 等编辑器中一致；
S4、压缩文件，将导出的HTML及附件文件一起压缩成ZIP等格式的压缩文件；
S5、文件上传，将ZIP文件上传到管理云平台；
S6、后端修改，在后端程序上对上传的HTML进行修改替换；
S7、选择确定表单样式，打开对应模块并选择表单，选择数据，编辑显示该零代码自定义HTML表单样式。
本发明技术方案的进一步改进在于：所述编辑软件过程还包括:
S1.1、根据表单的宽高比，选择适合的方向；
S1.2、选择纸张大小，例如选择A4；
S1.3、设计出所需的表面页面；
S1.4、填写每个位置对应的字段名，以对应关键字类型表达不同展示形式；
S1.5、选中整个表格，设置居中对齐，选择单元格对齐方式一般选择居中；
S1.6、设置表格的指定宽度和高度；
S1.7、添加浮于文字上方图片。
本发明技术方案的进一步改进在于：所述填写每个位置对应的字段名还包括：
S1.4.1、给出一种关键字类型的设计方式：
a、中文双引号：字段变量名(模块中默认字段名)；
b、中文书名号：二维码；
c、中文中括号：子表名；
S1.4.2、对于子表类型，可以在Word里面预先写好子表要显示的字段；
S1.4.2.1、子表名与字段中间用“中文分号”分隔开，字段之间用“中文逗号”分隔；
S1.4.2.2、最后的数字4用来指定一页表单可显示的最大子表行数。
本发明技术方案的进一步改进在于：所述添加浮于文字还包括：
S1.7.1、添加浮于文字上方图片；
S1.7.2、插入的图片默认是“嵌入型”的，而印章等图片需要浮于文字上方；
S1.7.3、右键点击图片，选择“大小和位置”；
S1.7.4、把“文字环绕方式”改为“浮于文字上方”，把位置中的“水平绝对位置”的右侧改为“字符”，“垂直绝对位置”的下侧改为“段落”；
S1.7.5、把图片移动到合适位置；
S1.7.6、保存另存为“筛选过的网页”，再用浏览器打开，这时可以看到网页中浮于文字上方的图片位置基本与WORD中一致；
S1.7.7、如果绝对位置的值是负数，则另存为HTML时图片位置会移动到 0的位置；
S1.7.8、如果“水平绝对位置”的右侧不是“字符”，则图片会根据窗口位置变动；
S1.7.9、点击图片时会出现如图22所示的“锚”的图形，表示当前图片的位置基准；
S1.7.10、这个“锚”要放在表格单元格内或某个字的旁边，要避免在空格旁边；
S1.7.11、如果保存成HTML时图片变模糊了，可以按下面的方法设置不压缩图片；
S1.7.11.1、Word——选项——高级——勾选“不压缩文件中的图像”下方默认分辨率选择“高保真”。
本发明技术方案的进一步改进在于：所述设计页面过程还包括:
S2.1、点击“文件”菜单的“另存为”按钮，选择“筛选过的网页 (*.htm,*.html)”，不同编辑软件可能会略有差异。
本发明技术方案的进一步改进在于：所述显示对比过程还包括:
S3.1、如果出现部分表格单元因为内容长度原因变宽变高了，可以回到 Word等编辑器中适当修改。
本发明技术方案的进一步改进在于：所述压缩文件过程还包括:
S4.1、如果表单不包含图片，则只有一个HTML文件。如果表单包含图片，还会有个同名的附件文件夹，里面保存着图片。将HTML文件和带有图片的附件文件夹一起压缩成ZIP文件。
本发明技术方案的进一步改进在于：所述文件上传过程还包括:
S5.1、如果表单不包含图片，则只有一个HTML文件；
S5.2、如果表单包含图片，还会有个同名的附件文件夹，里面保存着图片；
S5.3、将HTML文件和带有图片的附件文件夹一起压缩成ZIP文件。
本发明技术方案的进一步改进在于：所述后端修改过程还包括:
S6.1、解压上传的ZIP文件，打开其中的HTML文件；
S6.2、找到
标签，添加必要的VUE和Element UI，以及关键字类型关联组件的js与css文件路径。这些js与css文件都放在网页程序的静态目录中；S6.3、找到第一个
S6.4、按照关键字类型找到各关键字所在位置，并替换为对应页面组件。例如，将“姓名”这个关键字替换为
本发明技术方案的进一步改进在于：所述确定表单样式过程还包括:
S7.1、选择表单时，找到对应的上传HTML文件路径；
S7.2、一个模块可以设置多种表单样式，例如发货单可以根据发货给不同企业选用不同的表单样式；
S7.3、选择的数据就会以前面通过Word等编辑器生成的页面中，包括主表和子表的数据；
S7.4、显示的字体、颜色等都与Word中设置完全一致；
S7.5、通过当前页面可以对表格进行数据的新增、修改、删除，以及打印等。
由于采用了上述技术方案，本发明相对现有技术来说，取得的技术进步是：
1、本发明提供一种零代码自定义HTML表单样式的方法，能够简单便捷地通过Word、Excel、PowerPoint等常用文本和表格、图形编辑软件，快速地依照客户需求定制管理云平台的表单页面，不需要进行代码修改、软件发布等流程，大大减少部署实施时间，使用门槛低，无需为每个客户不同的需求重新编写代码，即使是客户企业不懂编程的管理员都可以自己定制想要的管理表单页面。
附图说明
图1为本发明的框架示意图；
图2为本发明的长宽高设置界面；
图3为本发明的纸张大小选择界面；
图4为本发明的设计表面界面；
图5为本发明的居中对齐设置界面；
图6为本发明的居中对齐单元格设置界面；
图7为本发明的表格指定宽度设置界面；
图8为本发明的行指定宽度设置界面；
图9为本发明的添加浮于文字上方设置界面；
图10为本发明的添加浮于文字上方属性设置界面；
图11为本发明的关键字类型的设计界面；
图12为本发明的子表显示字段设计界面；
图13为本发明添加浮于文字上方图片设置界面；
图14为本发明图片大小位置设置界面；
图15为本发明文字环绕方式设计界面；
图16为本发明图片位置修改属性界面；
图17为本发明图片移动位置修改界面；
图18为本发明文件保存设计界面；
图19为本发明图片绝对位置设计界面；
图20为本发明图片修改后位置界面；
图21为本发明图片水平位置变动界面；
图22为本发明图片位置基准界面；
图23为本发明设计页面保存界面；
图24为本发明表格单元观察界面；
图25为本发明表单压缩设计界面；
图26为本发明文件和图片同步压缩界面；
图27为本发明确定表单样式界面；
图28为本发明不同表单样式设置界面。
具体实施方式
下面结合实施例对本发明做进一步详细说明：
实施例1
如图1所示，本发明提供了一种零代码自定义HTML表单样式的方法，该零代码自定义HTML表单样式的方法，包括以下步骤：
S1、编辑软件，根据客户的定制化需求设计好基础页面；
S2、设计页面，将设计好的页面样式导出成HTML文件；
S3、显示对比，用浏览器打开刚才导出的HTML，看看显示效果是否与Word 等编辑器中一致；
S4、压缩文件，将导出的HTML及附件文件一起压缩成ZIP等格式的压缩文件；
S5、文件上传，将ZIP文件上传到管理云平台；
S6、后端修改，在后端程序上对上传的HTML进行修改替换；
S7、选择确定表单样式，打开对应模块并选择表单，选择数据，编辑显示该零代码自定义HTML表单样式；
编辑软件过程还包括:
S1.1、根据表单的宽高比，选择适合的方向，可参照图2所示；
S1.2、选择纸张大小，例如选择A4，此处参照图3所示；
S1.3、设计出所需的表面页面，参照图4所示；
S1.4、填写每个位置对应的字段名，以对应关键字类型表达不同展示形式；
S1.5、选中整个表格，设置居中对齐，选择单元格对齐方式一般选择居中，参照图5-图6所示；
S1.6、设置表格的指定宽度和高度，参照图7-图8所示；
S1.7、添加浮于文字上方图片，参照图9-图10所示；
填写每个位置对应的字段名还包括：
S1.4.1、给出一种关键字类型的设计方式：
a、中文双引号：字段变量名(模块中默认字段名)；
b、中文书名号：二维码；
c、中文中括号：子表名；参照图11所示；
S1.4.2、对于子表类型，可以在Word里面预先写好子表要显示的字段；
S1.4.2.1、子表名与字段中间用“中文分号”分隔开，字段之间用“中文逗号”分隔；
S1.4.2.2、最后的数字4用来指定一页表单可显示的最大子表行数；参照图12所示；
S1.7.1、添加浮于文字上方图片；
S1.7.2、插入的图片默认是“嵌入型”的，而印章等图片需要浮于文字上方，参照图13所示；
S1.7.3、右键点击图片，选择“大小和位置”，参照图14所示；
S1.7.4、把“文字环绕方式”改为“浮于文字上方”，把位置中的“水平绝对位置”的右侧改为“字符”，“垂直绝对位置”的下侧改为“段落”；参照图15-图17所示；
S1.7.5、把图片移动到合适位置；
S1.7.6、保存另存为“筛选过的网页”，再用浏览器打开，这时可以看到网页中浮于文字上方的图片位置基本与WORD中一致，参照图18所示；
S1.7.7、如果绝对位置的值是负数，则另存为HTML时图片位置会移动到 0的位置，参照图19-图20所示；
S1.7.8、如果“水平绝对位置”的右侧不是“字符”，则图片会根据窗口位置变动；参照图21所示；
S1.7.9、点击图片时会出现如图22所示的“锚”的图形，表示当前图片的位置基准；参照图22所示；
S1.7.10、这个“锚”要放在表格单元格内或某个字的旁边，要避免在空格旁边；
S1.7.11、如果保存成HTML时图片变模糊了，可以按下面的方法设置不压缩图片；
S1.7.11.1、Word——选项——高级——勾选“不压缩文件中的图像”下方默认分辨率选择“高保真”。
实施例2
如图1所示，在实施例1的基础上，本发明提供一种技术方案：优选的，设计页面过程还包括:
S2.1、点击“文件”菜单的“另存为”按钮，选择“筛选过的网页 (*.htm,*.html)”，不同编辑软件可能会略有差异；参照图23所示；
显示对比过程还包括:
S3.1、如果出现部分表格单元因为内容长度原因变宽变高了，可以回到 Word等编辑器中适当修改；参照图24所示；
压缩文件过程还包括:
S4.1、如果表单不包含图片，则只有一个HTML文件。如果表单包含图片，还会有个同名的附件文件夹，里面保存着图片，将HTML文件和带有图片的附件文件夹一起压缩成ZIP文件；参照图25所示；
文件上传过程还包括:
S5.1、如果表单不包含图片，则只有一个HTML文件；
S5.2、如果表单包含图片，还会有个同名的附件文件夹，里面保存着图片；
S5.3、将HTML文件和带有图片的附件文件夹一起压缩成ZIP文件，参照图26所示。
在本实施例中，通过常用的文本或表格编辑软件根据客户的定制化需求设计好基础页面，HTML显示是否与WORD中相同？‘否’在进行细微的调整，如若‘是’，将导出的HTML及附件文件一起压缩成ZIP等格式的压缩文件，将导出的文件上传到管理云平台，设置该表单对应的联合表或模块，设置页面中二维码显示的宽度，在后端程序上对上传的HTML进行修改替换，将关键字类型变换成对应的页面组件，与后端的数据进行关联，打开对应模块并选择表单，将后端数据以文本框、表格、二维码、图片等形式展现出来，可进行新增、修改、删除，以及打印等操作。
实施例3
如图1所示，在实施例1的基础上，本发明提供一种技术方案：优选的，确定表单样式过程还包括:
S7.1、选择表单时，找到对应的上传HTML文件路径；
S7.2、一个模块可以设置多种表单样式，例如发货单可以根据发货给不同企业选用不同的表单样式；
S7.3、选择的数据就会以前面通过Word等编辑器生成的页面中，包括主表和子表的数据；
S7.4、显示的字体、颜色等都与Word中设置完全一致；
S7.5、通过当前页面可以对表格进行数据的新增、修改、删除，以及打印等，参照图27-图28所示。
实施例4
如图1所示，在实施例1的基础上，本发明提供一种技术方案：优选的，后端修改过程还包括:
S6.1、解压上传的ZIP文件，打开其中的HTML文件；
S6.2、找到
标签，添加必要的VUE和Element UI，以及关键字类型关联组件的js与css文件路径，这些js与css文件都放在网页程序的静态目录中；S6.3、找到第一个
S6.4、按照关键字类型找到各关键字所在位置，并替换为对应页面组件。例如，将“姓名”这个关键字替换为
下面具体说一下该零代码自定义HTML表单样式的方法的原理。
如图1所示，通过Word等编辑软件进行页面设计，上传云平台后将表单页面与后端数据关联的整个流程，流程里所用的编辑软件不限于所列举的 Word、Excel、PowerPoint、WPS等，只要能导出HTML格式的编辑软件都包含在内，流程里所用的前端框架不限于举例中的VUE框架，其他的Jquery、React、 Angular都包含在内，流程里所用的关键字类型不限于所列举的编辑控件、子表格、二维码等，其他的下拉框、单选框等类型都包含在内。
该零代码自定义HTML表单样式的方法，能够简单便捷地通过Word、Excel、PowerPoint等常用文本和表格、图形编辑软件，快速地依照客户需求定制管理云平台的表单页面，不需要进行代码修改、软件发布等流程，大大减少部署实施时间，使用门槛低，无需为每个客户不同的需求重新编写代码，即使是客户企业不懂编程的管理员都可以自己定制想要的管理表单页面。
上文一般性的对本发明做了详尽的描述，但在本发明基础上，可以对之做一些修改或改进，这对于技术领域的一般技术人员是显而易见的。因此，在不脱离本发明思想精神的修改或改进，均在本发明的保护范围之内。
机译： “零代码”是一种减少毛发创新学习速度和简化实现方法的方法，它可以为每种形式设计和实现自定义样式。
机译： 互联网（万维网，“ www”）基于客户/实体定义的标准，零售或以其他方式按规则的时间增量（带有推送通知）定制时间刮取/采购服务。适用于www上任何有形或无形的可购买或免费项目。包括对付费用户（即企业）的输出/市场需求数据和//报告。后端代码，网站功能，相同功能的应用程序（iOS，Android）以及相关浏览器附加服务的自动自定义标准网络抓取方法的方法的专利。
机译： 选择用于遥控器的命令代码的方法，遥控器，提供个性化消费电子设备，使用户能够个性化遥控器，修改遥控器，更新便携式设备，可定制便携式设备，配置遥控器并允许用户自定义遥控器的方法，遥控器集，与遥控器一起使用的设备，可自定义的遥控器集，用于交互式环境的便携式用户界面以及自定义遥控器的方法具有显示屏和遥控器的用户设备，并允许访问按事件收费
