一种零代码自定义HTML表单样式的方法技术

技术编号:28451386 阅读:23 留言:0更新日期:2021-05-15 21:14
本发明专利技术公开了一种零代码自定义HTML表单样式的方法,涉及互联网云平台技术领域,该零代码自定义HTML表单样式的方法,包括以下步骤:编辑软件,根据客户的定制化需求设计好基础页面;设计页面,将设计好的页面样式导出成HTML文件。本发明专利技术提供一种零代码自定义HTML表单样式的方法,和现有技术相比,能够简单便捷地通过Word、Excel、PowerPoint等常用文本和表格、图形编辑软件,快速地依照客户需求定制管理云平台的表单页面,不需要进行代码修改、软件发布等流程,大大减少部署实施时间,使用门槛低,无需为每个客户不同的需求重新编写代码,即使是客户企业不懂编程的管理员都可以自己定制想要的管理表单页面。己定制想要的管理表单页面。己定制想要的管理表单页面。

【技术实现步骤摘要】
一种零代码自定义HTML表单样式的方法


[0001]本专利技术涉及一种零代码自定义HTML表单,涉及互联网云平台
,具体涉及一种零代码自定义HTML表单样式的方法。

技术介绍

[0002]现有互联网云平台上的网页页面开发,大多都需要通过修改代码的方式来改变页面的控件、样式等,云平台在给不同客户服务时,一般客户都会有定制化功能页面的需求,这时就需要多次修改代码来满足不同客户的需求。这种服务模式需要投入额外的人力物力时间金钱等,开发和实施周期长,效率低下。

技术实现思路

[0003]本专利技术需要解决的技术问题是提供一种零代码自定义HTML表单样式的方法,其中一种目的是为了具备能够简单便捷地通过Word、PowerPoint、Excel 等常用文本和表格、图形编辑软件,快速地依照客户需求定制管理云平台的表单页面,不需要进行代码修改、软件发布等流程,解决互联网云平台上的网页页面开发,大多都需要通过修改代码的方式来改变页面的控件、样式等,云平台在给不同客户服务时,一般客户都会有定制化功能页面的需求,这时就需要多次修改代码来满足不同客户的需求,这种服务模式需要投入额外的人力物力时间金钱等,开发和实施周期长,效率低下问题。
[0004]为解决上述技术问题,本专利技术所采用的技术方案是:
[0005]一种零代码自定义HTML表单样式的方法,该零代码自定义HTML表单样式的方法,包括以下步骤:
[0006]S1、编辑软件,根据客户的定制化需求设计好基础页面;
[0007]S2、设计页面,将设计好的页面样式导出成HTML文件;
[0008]S3、显示对比,用浏览器打开刚才导出的HTML,看看显示效果是否与Word 等编辑器中一致;
[0009]S4、压缩文件,将导出的HTML及附件文件一起压缩成ZIP等格式的压缩文件;
[0010]S5、文件上传,将ZIP文件上传到管理云平台;
[0011]S6、后端修改,在后端程序上对上传的HTML进行修改替换;
[0012]S7、选择确定表单样式,打开对应模块并选择表单,选择数据,编辑显示该零代码自定义HTML表单样式。
[0013]本专利技术技术方案的进一步改进在于:所述编辑软件过程还包括:
[0014]S1.1、根据表单的宽高比,选择适合的方向;
[0015]S1.2、选择纸张大小,例如选择A4;
[0016]S1.3、设计出所需的表面页面;
[0017]S1.4、填写每个位置对应的字段名,以对应关键字类型表达不同展示形式;
[0018]S1.5、选中整个表格,设置居中对齐,选择单元格对齐方式一般选择居中;
[0019]S1.6、设置表格的指定宽度和高度;
[0020]S1.7、添加浮于文字上方图片。
[0021]本专利技术技术方案的进一步改进在于:所述填写每个位置对应的字段名还包括:
[0022]S1.4.1、给出一种关键字类型的设计方式:
[0023]a、中文双引号:字段变量名(模块中默认字段名);
[0024]b、中文书名号:二维码;
[0025]c、中文中括号:子表名;
[0026]S1.4.2、对于子表类型,可以在Word里面预先写好子表要显示的字段;
[0027]S1.4.2.1、子表名与字段中间用“中文分号”分隔开,字段之间用“中文逗号”分隔;
[0028]S1.4.2.2、最后的数字4用来指定一页表单可显示的最大子表行数。
[0029]本专利技术技术方案的进一步改进在于:所述添加浮于文字还包括:
[0030]S1.7.1、添加浮于文字上方图片;
[0031]S1.7.2、插入的图片默认是“嵌入型”的,而印章等图片需要浮于文字上方;
[0032]S1.7.3、右键点击图片,选择“大小和位置”;
[0033]S1.7.4、把“文字环绕方式”改为“浮于文字上方”,把位置中的“水平绝对位置”的右侧改为“字符”,“垂直绝对位置”的下侧改为“段落”;
[0034]S1.7.5、把图片移动到合适位置;
[0035]S1.7.6、保存另存为“筛选过的网页”,再用浏览器打开,这时可以看到网页中浮于文字上方的图片位置基本与WORD中一致;
[0036]S1.7.7、如果绝对位置的值是负数,则另存为HTML时图片位置会移动到 0的位置;
[0037]S1.7.8、如果“水平绝对位置”的右侧不是“字符”,则图片会根据窗口位置变动;
[0038]S1.7.9、点击图片时会出现如图22所示的“锚”的图形,表示当前图片的位置基准;
[0039]S1.7.10、这个“锚”要放在表格单元格内或某个字的旁边,要避免在空格旁边;
[0040]S1.7.11、如果保存成HTML时图片变模糊了,可以按下面的方法设置不压缩图片;
[0041]S1.7.11.1、Word——选项——高级——勾选“不压缩文件中的图像”下方默认分辨率选择“高保真”。
[0042]本专利技术技术方案的进一步改进在于:所述设计页面过程还包括:
[0043]S2.1、点击“文件”菜单的“另存为”按钮,选择“筛选过的网页 (*.htm,*.html)”,不同编辑软件可能会略有差异。
[0044]本专利技术技术方案的进一步改进在于:所述显示对比过程还包括:
[0045]S3.1、如果出现部分表格单元因为内容长度原因变宽变高了,可以回到 Word等编辑器中适当修改。
[0046]本专利技术技术方案的进一步改进在于:所述压缩文件过程还包括:
[0047]S4.1、如果表单不包含图片,则只有一个HTML文件。如果表单包含图片,还会有个同名的附件文件夹,里面保存着图片。将HTML文件和带有图片的附件文件夹一起压缩成ZIP文件。
[0048]本专利技术技术方案的进一步改进在于:所述文件上传过程还包括:
[0049]S5.1、如果表单不包含图片,则只有一个HTML文件;
[0050]S5.2、如果表单包含图片,还会有个同名的附件文件夹,里面保存着图片;
[0051]S5.3、将HTML文件和带有图片的附件文件夹一起压缩成ZIP文件。
[0052]本专利技术技术方案的进一步改进在于:所述后端修改过程还包括:
[0053]S6.1、解压上传的ZIP文件,打开其中的HTML文件;
[0054]S6.2、找到<head>标签,添加必要的VUE和Element UI,以及关键字类型关联组件的js与css文件路径。这些js与css文件都放在网页程序的静态目录中;
[0055]S6.3、找到第一个<div>标签,并修改为<div id='app'>。此app用于后面关联VUE对象;
[0056]S6.4、按照关键字类型找到各关键字所本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种零代码自定义HTML表单样式的方法,其特征在于,该零代码自定义HTML表单样式的方法,包括以下步骤:S1、编辑软件,根据客户的定制化需求设计好基础页面;S2、设计页面,将设计好的页面样式导出成HTML文件;S3、显示对比,用浏览器打开刚才导出的HTML,看看显示效果是否与Word等编辑器中一致;S4、压缩文件,将导出的HTML及附件文件一起压缩成ZIP等格式的压缩文件;S5、文件上传,将ZIP文件上传到管理云平台;S6、后端修改,在后端程序上对上传的HTML进行修改替换;S7、选择确定表单样式,打开对应模块并选择表单,选择数据,编辑显示该零代码自定义HTML表单样式。2.根据权利要求1所述一种零代码自定义HTML表单样式的方法,其特征在于,所述编辑软件过程还包括:S1.1、根据表单的宽高比,选择适合的方向;S1.2、选择纸张大小,例如选择A4;S1.3、设计出所需的表面页面;S1.4、填写每个位置对应的字段名,以对应关键字类型表达不同展示形式;S1.5、选中整个表格,设置居中对齐,选择单元格对齐方式一般选择居中;S1.6、设置表格的指定宽度和高度;S1.7、添加浮于文字上方图片。3.根据权利要求2所述一种零代码自定义HTML表单样式的方法,其特征在于,所述填写每个位置对应的字段名还包括:S1.4.1、给出一种关键字类型的设计方式:a、中文双引号:字段变量名(模块中默认字段名);b、中文书名号:二维码;c、中文中括号:子表名;S1.4.2、对于子表类型,可以在Word里面预先写好子表要显示的字段;S1.4.2.1、子表名与字段中间用“中文分号”分隔开,字段之间用“中文逗号”分隔;S1.4.2.2、最后的数字4用来指定一页表单可显示的最大子表行数。4.根据权利要求2所述一种零代码自定义HTML表单样式的方法,其特征在于,所述添加浮于文字还包括: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、点击图片时会出现如下图所示的“锚”的图形,表示当前图片的位置基准;S1.7.10、这个“锚”要放在表格单元格内或某个字的旁边,要避免在空格旁边;S1.7.11、如果保存成HTML时图片变模糊了,可以按下面的方法设置不压缩图片;S1.7.11.1、Word——选项——高级——勾选“...

【专利技术属性】
技术研发人员:陈涛
申请(专利权)人:武汉晨曦芸峰科技有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1