CN117236356A - 基于web的标签在线设计及打印方法 - Google Patents

Abstract

本发明提供一种基于WEB的标签在线设计及打印方法，涉及标签设计技术领域，包括：使用HTML构建界面结构，根据预设的图形处理模块在界面结构中添加图形处理库，使用UI库在界面结构中添加用户界面库，根据用户界面库，图形处理库和界面结构，通过异步请求上传用户请求，服务器根据用户请求生成WEB标签；根据WEB标签，结合预设的标签解析模块，通过指令集将WEB标签解析为打印指令，根据打印指令，结合指令组装模块，将打印指令组装为打印标签；根据打印标签，结合驱动模块连接打印机，结合打印指令打印标签，生成并保留打印记录，用以帮助用户在WEB端实现快速设计标签并打印。

Description

基于WEB的标签在线设计及打印方法

技术领域

本发明涉及标签生成技术领域，尤其涉及一种基于WEB的标签在线设计及打印方法。

背景技术

随着仓储管理智能化发展，在仓库管理和制造业中需要对货物进行分类管理，需要通过标签表明货物的属性和数量。

现有技术中，CN115660012A公开了一种标签生成打印方法、装置和存储介质，通过获取标签设计器生成的打印格式文件，将所述打印格式标签文件内的图片下载到打印机指定存储位置供后续的标签指令的引用，对打印格式文件中的标签内容和标签控制指令进行解析，将标签内所有字段转化成第一JSON对象，提取收到的包含有赋值变量的第二JSON对象中的变量名称和对应值，在所述第一JSON对象中找到对应匹配的变量名称后对变量值进行赋值替换。

CN106056429A，公开了一种标签生成方法和标签生成装置。其中，该标签生成方法，包括如下步骤：步骤S1，确认对象以及获取预设次数M。步骤S2，输出与第i个系统标志项对应的预设数目的系统标签内容，以及选择预设数目的系统标签内容中一个或接收外部输入的客制化标签内容以确认第i个系统标志项，i＝1。步骤S3，输出与第i个系统标志项所选的系统标签内容或与第i个系统标志项的客制化标签内容关联的预设数目的系统标签内容，选择预设数目的系统标签内容中一个或接收外部输入的客制化标签内容以确认第i+1个系统标志项，i++，重复执行步骤S3直至确认第M个系统标志项。

综上，现有技术虽然能够实现对打印格式标签文件的 打印，但是无法根据用户需求对标签进行在线设计和打印，因此需要提供一种方案解决现有技术中无法在线设计标签及打印的技术问题。

发明内容

本发明实施例提供一种基于WEB的标签在线设计及打印方法，用于根据用户操作在WEB端实时生成标签并进行打印。

本发明实施例的第一方面，提供一种基于WEB的标签在线设计及打印方法，包括：

使用HTML构建界面结构，根据预设的图形处理模块在所述界面结构中添加图形处理库，使用UI库在所述界面结构中添加用户界面库，根据所述用户界面库，所述图形处理库和所述界面结构，通过异步请求上传用户请求，服务器根据所述用户请求生成WEB标签；

根据所述WEB标签，结合预设的标签解析模块，通过指令集将所述WEB标签解析为打印指令，根据所述打印指令，结合指令组装模块，将所述打印指令组装为打印标签；

根据所述打印标签，结合驱动模块连接打印机，生成并保留打印记录。

在一种可选的实施方式中，

所述根据预设的图形处理模块在所述界面结构中添加图形处理库包括：

在HTML中创建一个指定高度和宽度的Canvas元素，根据所述Canvas元素，使用JavaScript指令获取所述Canvas元素的上下文，根据所述Canvas元素的上下文，结合Canvas API绘制基本图形，通过Canvas事件监听器获取用户鼠标操作，根据所述用户鼠标操作结合所述基本图形，生成图形处理库；或者

在HTML中创建一个包含图形元素和属性的SVG元素，根据所述SVG元素绘制基本图形，并使用JavaScript指令SVG事件监听器绑定至所述SVG元素上，根据所述事件监听器获取用户鼠标操作，根据所述用户鼠标操作结合所述基本图形，生成图形处理库。

在一种可选的实施方式中，

所述通过异步请求上传用户请求，服务器根据所述用户请求生成WEB标签包括：

创建异步请求函数，并使用async关键字进行表示，在所述异步请求函数中加入try-catch模块包裹所述异步请求函数，在所述try-catch块中执行异步操作，并使用await关键字等待操作完成，得到异步操作结果；

解析所述异步操作结果，判断是否存在异常，若存在异常，则返回请求错误结果，若不存在异常，则通过return返回所述异步操作结果。

在一种可选的实施方式中，

所述方法还包括服务器允许跨域请求：

在服务器CORS配置中，指定自定义头部白名单，根据所述自定义头部白名单，在WEB前端的AJAX请求中，设置需要发送的自定义头部信息，服务器检查所述自定义头部信息是否在所述自定义头部白名单中；

若存在，则发送OPTIONS预检请求，服务器根据所述OPTIONS预检请求返回对应的CORS头部信息，若服务器设置了额外头部信息，且所述额外头部信息不存在于CORS规范中，则通过Access-Control-Expose-Headers指定可以被访问的额外头部信息，若不在，则服务器返回错误状态码和错误信息；

根据所述自定义头部信息，定期更新所述CORS策略，直至满足现有的使用需求。

在一种可选的实施方式中，

根据所述WEB标签，结合预设的标签解析模块，通过指令集将所述WEB标签解析为打印指令，根据所述打印指令，结合指令组装模块，将所述打印指令组装为打印标签包括：

获取所述WEB标签，将所述WEB标签输入至预设的标签解析模块中，将所述WEB标签进行分类，生成子类标签，对于几何子类标签，根据所述几何子类标签的坐标和粗细，通过Graphic Box和Graphic Symbol生成打印指令，对于条码子类标签和二维码子类标签，使用ZXing库生成条码图片和二维码图片，根据所述条码图片和所述二维码图片，通过Code128Barcode将所述条码图片和所述二维码图片转换为ASCII符号表示的打印指令，对于文字子类标签，结合所述文字子类标签的字体，大小和坐标生成文本图片，通过ASCII Text将所述文本图片转换为ASCII符号表示的打印指令；

根据所述打印指令，通过指令组装模块，将所述打印指令进行缩放和对齐，得到标准化打印指令，将所述标准化打印指令根据生成顺序叠加，得到所述打印标签。

在一种可选的实施方式中，

所述方法还包括标签嵌套规则：

根据所述子类标签，生成标签模板，在所述标签模板中加入嵌套子类标签，所述标签解析模块生成打印指令前对所述标签模板进行解析；

若存在所述嵌套子类标签，则递归处理所述子类标签的全部元素，对于每个子元素，计算子元素在父元素中的相对位置和大小，根据所述相对位置和大小，计算所述子元素的实际坐标和尺寸；

根据所述子元素的实际坐标和尺寸，通过布局算法对所述子元素进行计算，生成打印指令；

若不存在则直接生成打印指令。

在一种可选的实施方式中，所述方法还包括动态替换机制：

在所述标签模板中定义占位符，根据所述占位符生成占位符替换规则，根据所述占位符替换规则，并在所述界面结构中生成占位符替换规则配置界面；

所述标签解析模块生成所述打印指令前，对所述标签模板进行解析，若存在占位符，则根据所述占位符的名称查找所述占位符替换规则；

若存在与所述占位符匹配的占位符替换规则，则将所述占位符替换为所述占位符替换规则定义的内容，若不存在与所述占位符匹配的占位符替换规则，则保留所述占位符，并记为错误占位符；

根据所述错误占位符，记录所述保留的占位符对应的内容和属性，得到错误日志。

本发明实施例的第二方面，提供一种基于WEB的标签在线设计及打印系统，包括：

第一单元，用于使用HTML构建界面结构，根据预设的图形处理模块在所述界面结构中添加图形处理库，使用UI库在所述界面结构中添加用户界面库，根据所述用户界面库，所述图形处理库和所述界面结构，通过异步请求上传用户请求，服务器根据所述用户请求生成WEB标签；

第二单元，用于根据所述WEB标签，结合预设的标签解析模块，通过指令集将所述WEB标签解析为打印指令，根据所述打印指令，结合指令组装模块，将所述打印指令组装为打印标签；

第三单元，用于根据所述打印标签，结合驱动模块连接打印机，生成并保留打印记录。

本发明实施例的第三方面，

提供一种电子设备，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为调用所述存储器存储的指令，以执行前述所述的方法。

本发明实施例的第四方面，

提供一种计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令被处理器执行时实现前述所述的方法。

本发明使用HTML构建界面结构，并集成用户界面库，使用户能够轻松创建、设计和定制标签，使得标签设计过程更加直观和用户友好，通过预设的图形处理模块，用户可以添加图形处理库，以便在标签上添加多种图形元素，如线条、形状等，而无需专业图形设计经验，通过异步请求上传用户请求，服务器能够处理大量请求，生成WEB标签，降低了用户端的工作负担，提高了响应速度。

附图说明

图1为本发明实施例一种基于WEB的标签在线设计及打印方法的流程示意图；

图2为本发明实施例一种基于WEB的标签在线设计及打印系统的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

下面以具体地实施例对本发明的技术方案进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例不再赘述。

图1为本发明实施例一种基于WEB的标签在线设计及打印方法的流程示意图，如图1所示，所述方法包括：

S1.使用HTML构建界面结构，根据预设的图形处理模块在所述界面结构中添加图形处理库，使用UI库在所述界面结构中添加用户界面库，根据所述用户界面库，所述图形处理库和所述界面结构，通过异步请求上传用户请求，服务器根据所述用户请求生成WEB标签；

所述图形处理库是一种软件库或框架，用于处理图形、图像和渲染任务，通过提供函数、类和工具，使开发者能够创建、编辑、显示和处理图形和图像数据，所述用户界面库是一种软件库或框架，用于创建图形用户界面，通过提供用户界面元素（如按钮、文本框、菜单、窗口等）和交互工具，以便用户与应用程序进行交互。

在一种可选的实施方式中，

所述根据预设的图形处理模块在所述界面结构中添加图形处理库包括：

在HTML中创建一个指定高度和宽度的Canvas元素，根据所述Canvas元素，使用JavaScript指令获取所述Canvas元素的上下文，根据所述Canvas元素的上下文，结合Canvas API绘制基本图形，通过Canvas事件监听器获取用户鼠标操作，根据所述用户鼠标操作结合所述基本图形，生成图形处理库；或者

在HTML中创建一个包含图形元素和属性的SVG元素，根据所述SVG元素绘制基本图形，并使用JavaScript指令SVG事件监听器绑定至所述SVG元素上，根据所述事件监听器获取用户鼠标操作，根据所述用户鼠标操作结合所述基本图形，生成图形处理库。

在HTML文件中使用Canvas创建一个canvas元素，指定canvas的宽度和高度，以确定可以绘制的区域大小，使用JavaScript获取Canvas元素的引用，通过Canvas的getContext方法获取Canvas的上下文对象，利用上下文对象提供的Canvas API，可以绘制基本图形，如矩形、圆形、线条、文本，示例性地，设置绘图属性，如颜色、线宽、填充样式等，然后使用相应的API方法进行绘制，添加事件监听器来捕获用户的鼠标操作，如鼠标移动、鼠标点击，监听事件后，获取事件对象中的鼠标坐标信息，以便在Canvas上作出相应的反应，示例性地，当接收到鼠标事件时，可以根据事件的坐标信息在Canvas上绘制图形或者在现有图形上进行修改，包括绘制交互式图形、拖动图形、连接线条等用户交互，基于前述流程，对功能进行扩展和封装，得到所述图形处理库，该处理库可以包括常见的图形绘制方法，交互操作和图层管理。

或者，在HTML文件中使用svg创建一个SVG容器，内部包含各种SVG图形元素，如矩形、圆形、线条等，设置SVG元素的属性，如宽度、高度，确定可绘制的区域大小，在SVG容器内部，使用SVG图形元素创建基本图形，设置每个图形元素的属性，如位置、尺寸、颜色，确保生成的图形外观符合实际需求，使用JavaScript获取SVG元素的引用，使用SVG元素的addEventtlistener方法来添加事件监听器，例如鼠标移动、鼠标点击等，将事件处理程序与获取的鼠标操作相关联，相应用户鼠标操作，根据用户的鼠标操作在SVG元素上绘制新图形、修改现有图形或执行其他互动操作，实现绘制交互式图形、拖动元素、连接线条等用户交互，基于前述流程，对功能进行扩展和封装，得到所述图形处理库，该处理库可以包括常见的图形绘制方法，交互操作和图层管理。

本实施例中，用户可以通过图形处理库在界面上轻松地绘制和设计标签，而不需要深入了解底层绘图技术，用户可以实时预览设计效果，随时查看标签的外观，从而提高设计准确性，用户可以将设计好的标签导出为图像文件或直接打印，以满足标签制作和打印的需求。

在一种可选的实施方式中，

所述通过异步请求上传用户请求，服务器根据所述用户请求生成WEB标签包括：

创建异步请求函数，并使用async关键字进行表示，在所述异步请求函数中加入try-catch模块包裹所述异步请求函数，在所述try-catch块中执行异步操作，并使用await关键字等待操作完成，得到异步操作结果；

解析所述异步操作结果，判断是否存在异常，若存在异常，则返回请求错误结果，若不存在异常，则通过return返回所述异步操作结果。

定义一个函数并使用async关键字进行标记，在函数内部，使用try-catch模块包裹执行异步操作的代码，在try模块中，在需要等待异步操作完成的地方使用await关键字等待异步操作的结果，在try模块内，异步操作完成后，获得异步操作结果；

服务器解析HTTP响应、读取文件内容、处理数据库查询结果，如果在结果解析过程中出现异常，使用catch模块进行捕获，在捕获异常后，执行相应的异常处理操作，如记录错误、执行备用操作或者构造适当的错误信息，如果存在异常，返回一个包含错误信息的错误结果，如果不存在异常，将操作结果返回。

在一种可选的实施方式中，

所述方法还包括服务器允许跨域请求：

在服务器CORS配置中，指定自定义头部白名单，根据所述自定义头部白名单，在WEB前端的AJAX请求中，设置需要发送的自定义头部信息，服务器检查所述自定义头部信息是否在所述自定义头部白名单中；

若存在，则发送OPTIONS预检请求，服务器根据所述OPTIONS预检请求返回对应的CORS头部信息，若服务器设置了额外头部信息，且所述额外头部信息不存在于CORS规范中，则通过Access-Control-Expose-Headers指定可以被访问的额外头部信息，若不在，则服务器返回错误状态码和错误信息；

根据所述自定义头部信息，定期更新所述CORS策略，直至满足现有的使用需求。

在服务器端，通过配置CORS，指定允许的自定义头部白名单，在该字段中列出允许的自定义头部，在前端的AJAX请求中，需要设置需要发送的自定义头部信息，通过XHR对象实现，在AJAX请求的setRequestHeader方法中，将需要发送的自定义头部信息添加到请求中，发送AJAX请求到目标服务器，请求中包括所需的自定义头部信息，当请求到达服务器时，服务器会检查请求中的自定义头部信息，根据事先配置的自定义头部白名单来验证请求中的自定义头部是否在允许的白名单中，如果自定义头部信息在白名单中，服务器将继续处理请求，并返回相应的响应，如果自定义头部信息不在白名单中，服务器可以选择拒绝请求，返回适当的CORS错误响应，如HTTP状态码为403 Forbidden。

当浏览器检测到跨域请求中包含了自定义的请求头（自定义头部信息）时，它会发出一个OPTIONS预检请求。OPTIONS请求用于检查服务器是否支持跨域请求并了解响应是否包含必要的CORS头部信息，服务器接收到OPTIONS预检请求后，根据CORS规范返回相应的CORS头部信息，如果服务器设置了额外头部信息（不包括标准CORS头部信息），并且这些额外头部信息不在CORS规范中，默认情况下浏览器不会将它们暴露给前端JavaScript，服务器可以通过Access-Control-Expose-Headers头部来指定哪些额外头部信息可以被前端JavaScript访问，如果服务器返回的额外头部信息不在CORS规范中，且没有被指定，浏览器将不允许前端JavaScript访问这些头部信息，以保护用户数据的安全性，如果服务器在OPTIONS预检请求中返回的CORS头部信息不允许跨域请求，或者请求中的自定义头部信息不在CORS规范中，服务器可以返回适当的错误状态码。

定期检查应用程序的需求和使用情况，特别关注可能会触发跨域请求的新功能、API端点或头部信息的变化，定期审查现有的CORS策略，包括允许的域名、允许的HTTP方法、允许的自定义头部等，如果需求发生变化，或者需要新增的域名或自定义头部信息，相应地调整CORS策略。

S2.根据所述WEB标签，结合预设的标签解析模块，通过指令集将所述WEB标签解析为打印指令，根据所述打印指令，结合指令组装模块，将所述打印指令组装为打印标签；所述打印标签是包含打印指令的文本文件，用于定义标签的布局、内容和样式，可以包含文本、条形码、二维码、图形和其他元素，以及各种打印参数，所述标签解析模块负责将打印标签文件解析为打印机可以理解的指令序列，能够识别和分析打印指令，并将它们转换为打印机可以执行的指令，同时还可以验证打印标签的有效性，以确保它符合打印语法规则，所述指令组装模块负责将标签中的各个元素和指令按照特定的格式组装成完整的打印标签文件，能够将文本、条形码、图形等元素正确放置在标签上，并设置各种打印参数，如标签大小、字体、旋转等，所述打印指令是一系列命令、参数和配置选项，用于控制标签打印机的行为，通常以特定的编程语言（如ZPL、EPL、ESC/P等）编写，并在打印任务之前发送到打印机。

在一种可选的实施方式中，

根据所述WEB标签，结合预设的标签解析模块，通过指令集将所述WEB标签解析为打印指令，根据所述打印指令，结合指令组装模块，将所述打印指令组装为打印标签包括：

获取所述WEB标签，将所述WEB标签输入至预设的标签解析模块中，将所述WEB标签进行分类，生成子类标签，对于几何子类标签，根据所述几何子类标签的坐标和粗细，通过Graphic Box和Graphic Symbol生成打印指令，对于条码子类标签和二维码子类标签，使用ZXing库生成条码图片和二维码图片，根据所述条码图片和所述二维码图片，通过Code128Barcode将所述条码图片和所述二维码图片转换为ASCII符号表示的打印指令，对于文字子类标签，结合所述文字子类标签的字体，大小和坐标生成文本图片，通过ASCII Text将所述文本图片转换为ASCII符号表示的打印指令；

根据所述打印指令，通过指令组装模块，将所述打印指令进行缩放和对齐，得到标准化打印指令，将所述标准化打印指令根据生成顺序叠加，得到所述打印标签。

获取WEB标签的数据，包括标签的布局、内容和样式信息，将获取的WEB标签数据输入到预设的标签解析模块中，标签解析模块对WEB标签进行分类，将其分为不同的子类别，如几何子类标签、条码子类标签、二维码子类标签和文字子类标签，对于几何子类标签，标签解析模块根据几何子类标签的坐标和粗细信息，使用打印指令来生成对应的图形框和图形符号的指令，对于条码子类标签和二维码子类标签，标签解析模块使用ZXing库来生成条码图片和二维码图片，将生成的条码图片和二维码图片转换为ASCII符号表示的打印指令，使用Code 128 Barcode等标准来编码，对于文字子类标签，标签解析模块结合文字子类标签的字体、大小和坐标信息来生成文本图片，将生成的文本图片转换为ASCII符号表示的打印指令，使用ASCII Text等标准来编码，将生成的打印指令整合到一个完整的打印标签中，确保各个子类标签正确排列和定位，最终标签解析模块会输出包含所有子类别的打印标签；

使用指令组装模块，对每个生成的打印指令进行缩放和对齐操作，以确保它们在标签上按照预定的规则排列和对齐，缩放调整指令的大小，以适应标签的尺寸，对齐操作确保各个元素在标签上的位置和相对位置是正确的，将经过缩放和对齐处理的打印指令转换为标准化的打印指令格式，以确保它们符合打印语言的规范，根据需要的生成顺序，将标准化的打印指令按照预定的次序叠加到一个空的打印标签中。

本实施例中，将用户输入的WEB标签内容分为不同的子类标签，包括几何子类标签、条码子类标签、二维码子类标签和文字子类标签，有助于组织和处理不同类型的标签内容，通过指令组装模块，对生成的打印指令进行缩放和对齐操作，以确保标签的一致性和准确性，有助于在不同的标签尺寸和打印设备上正确显示标签内容，综上，本实施例允许用户创建多样化的标签内容，包括图形、文本和条码等，而无需深入了解打印语言的细节，提高了标签生成的灵活性和便捷性，适用于各种标签打印需求。

在一种可选的实施方式中，

所述方法还包括标签嵌套规则：

根据所述子类标签，生成标签模板，在所述标签模板中加入嵌套子类标签，所述标签解析模块生成打印指令前对所述标签模板进行解析；

若存在所述嵌套子类标签，则递归处理所述子类标签的全部元素，对于每个子元素，计算所述子元素在父元素中的相对位置和大小，根据所述相对位置和大小，计算所述子元素的实际坐标和尺寸；

根据所述子元素的实际坐标和尺寸，通过布局算法对所述子元素进行计算，生成打印指令，若不存在则直接生成打印指令。

基于所述子类标签的需求和布局，创建一个标签模板，该模板作为嵌套子类标签的容器，在标签模板中确定主要布局元素，如页面大小和边距，将嵌套子类标签添加到标签模板中，在生成打印指令之前，标签解析模块需要解析标签模板；

如果存在嵌套子类标签，进行递归处理，对于每个子元素，通过坐标转换和缩放计算其在父元素中的相对位置和大小，基于子元素的相对位置和大小，计算子元素的实际坐标和尺寸；

根据所述子元素的实际坐标和尺寸，通过布局算法对所述子元素进行计算，生成打印指令，若不存在嵌套子类标签，则直接生成打印指令

本实施例中，标签嵌套规则允许用户创建复杂的标签设计，其中包含多个子类标签，对于需要在一个标签上显示不同类型的信息、图形、文本和条码的应用非常有用，标签嵌套规则确保子类标签按照规定的布局和对齐方式正确排列在父元素中，提供了对标签内容的精确控制，以确保标签在打印时外观一致，通过计算子元素在父元素中的相对位置和大小，嵌套规则可以确保子元素在不同标签尺寸上的适应性，有助于确保标签内容的适当调整，以满足不同尺寸的标签要求。

在一种可选的实施方式中，

所述方法还包括动态替换机制：

在所述标签模板中定义占位符，根据所述占位符生成占位符替换规则，根据所述占位符替换规则，并在所述界面结构中生成占位符替换规则配置界面；

所述标签解析模块生成所述打印指令前，对所述标签模板进行解析，若存在占位符，则根据所述占位符的名称查找所述占位符替换规则；

若存在与所述占位符匹配的占位符替换规则，则将所述占位符替换为所述占位符替换规则定义的内容，若不存在与所述占位符匹配的占位符替换规则，则保留所述占位符，并记为错误占位符；

根据所述错误占位符，记录所述保留的占位符对应的内容和属性，得到错误日志。

在标签模板中定义需要替换的占位符，并用特定的标记或格式来表示，如placeolder，为每个占位符定义占位符替换规则，包括占位符的名称和替代内容，例如，对于占位符customer_name，占位符替换规则可能定义为将其替换为客户的实际姓名，创建一个界面结构，允许用户配置占位符替换规则，包括一个列表，显示所有占位符和相应的替代内容，以及选项来编辑或添加新的占位符替换规则；

在生成打印指令之前，标签解析模块需要解析标签模板，以识别其中的占位符，对于每个占位符，标签解析模块根据占位符名称查找占位符替换规则，如果找到匹配的占位符替换规则，继续下一步；如果没有找到匹配的规则，则将该占位符标记为错误占位符，对于每个匹配的占位符，将其替换为占位符替换规则中定义的内容；

对于未找到匹配规则的占位符，将其保留在打印标签中，同时记录这些错误占位符的名称和属性，生成错误日志，以通知用户有哪些占位符没有被正确替换，经过占位符替换后，生成完整的打印指令，其中占位符已经被替换为实际内容。

本实施例中，用户可以在界面上轻松配置占位符替换规则，而无需修改标签模板，允许用户自定义标签的内容，而不必重新创建标签模板，从而提高了标签设计的灵活性，用户可以在标签模板中定义占位符，通过配置占位符替换规则来动态替换占位符的内容，可以根据实际需求动态地替换占位符，以适应不同的情境和数据，动态替换机制确保标签的内容可以在不同情境下自动调整，而无需手动修改标签模板，提高了标签生成的效率和一致性，特别是在需要频繁生成不同内容的情况下。

S3.根据所述打印标签，结合驱动模块连接打印机，结合打印指令打印标签，生成并保留打印记录。

获取预先生成的打印标签，使用驱动模块通过USB连接或串行连接来建立与打印机的连接，使用已连接的打印机，将准备好的打印标签发送到打印机，打印机将根据接收的打印指令打印标签，在打印过程中，将生成打印记录，包括打印时间、打印标签的内容、打印机信息，将记录保存到数据库、日志文件或其他存储介质中，以供后续的检索和审查。

图2为本发明实施例一种基于WEB的标签在线设计及打印系统的结构示意图，如图2所示，所述系统包括：

第一单元，用于使用HTML构建界面结构，根据预设的图形处理模块在所述界面结构中添加图形处理库，使用UI库在所述界面结构中添加用户界面库，根据所述用户界面库，所述图形处理库和所述界面结构，通过异步请求上传用户请求，服务器根据所述用户请求生成WEB标签；

第二单元，用于根据所述WEB标签，结合预设的标签解析模块，通过指令集将所述WEB标签解析为打印指令，根据所述打印指令，结合指令组装模块，将所述打印指令组装为打印标签；

第三单元，用于根据所述打印标签，结合驱动模块连接打印机，生成并保留打印记录。

本发明可以是方法、装置、系统和/或计算机程序产品。计算机程序产品可以包括计算机可读存储介质，其上载有用于执行本发明的各个方面的计算机可读程序指令。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims (10)

1.一种基于WEB的标签在线设计及打印方法，其特征在于，包括：

使用HTML构建界面结构，根据预设的图形处理模块在所述界面结构中添加图形处理库，使用UI库在所述界面结构中添加用户界面库，根据所述用户界面库，所述图形处理库和所述界面结构，通过异步请求上传用户请求，服务器根据所述用户请求生成WEB标签；

根据所述WEB标签，结合预设的标签解析模块，通过指令集将所述WEB标签解析为打印指令，根据所述打印指令，结合指令组装模块，将所述打印指令组装为打印标签；

根据所述打印标签，结合驱动模块连接打印机，生成并保留打印记录。

2.根据权利要求1所述的方法，其特征在于，所述根据预设的图形处理模块在所述界面结构中添加图形处理库包括：

在HTML中创建一个指定高度和宽度的Canvas元素，根据所述Canvas元素，使用JavaScript指令获取所述Canvas元素的上下文，根据所述Canvas元素的上下文，结合Canvas API绘制基本图形，通过Canvas事件监听器获取用户鼠标操作，根据所述用户鼠标操作结合所述基本图形，生成图形处理库；或者

在HTML中创建一个包含图形元素和属性的SVG元素，根据所述SVG元素绘制基本图形，并使用JavaScript指令SVG事件监听器绑定至所述SVG元素上，根据所述事件监听器获取用户鼠标操作，根据所述用户鼠标操作结合所述基本图形，生成图形处理库。

3.根据权利要求1所述的方法，其特征在于，所述通过异步请求上传用户请求，服务器根据所述用户请求生成WEB标签包括：

创建异步请求函数，并使用async关键字进行表示，在所述异步请求函数中加入try-catch模块包裹所述异步请求函数，在所述try-catch块中执行异步操作，并使用await关键字等待操作完成，得到异步操作结果；

解析所述异步操作结果，判断是否存在异常，若存在异常，则返回请求错误结果，若不存在异常，则通过return返回所述异步操作结果。

4.根据权利要求1所述的方法，其特征在于，所述方法还包括服务器允许跨域请求：

在服务器CORS配置中，指定自定义头部白名单，根据所述自定义头部白名单，在WEB前端的AJAX请求中，设置需要发送的自定义头部信息，服务器检查所述自定义头部信息是否在所述自定义头部白名单中；

若存在，则发送OPTIONS预检请求，服务器根据所述OPTIONS预检请求返回对应的CORS头部信息，若服务器设置了额外头部信息，且所述额外头部信息不存在于CORS规范中，则通过Access-Control-Expose-Headers指定可以被访问的额外头部信息，若不在，则服务器返回错误状态码和错误信息；

根据所述自定义头部信息，定期更新所述CORS策略，直至满足现有的使用需求。

5.根据权利要求1所述的方法，其特征在于，根据所述WEB标签，结合预设的标签解析模块，通过指令集将所述WEB标签解析为打印指令，根据所述打印指令，结合指令组装模块，将所述打印指令组装为打印标签包括：

获取所述WEB标签，将所述WEB标签输入至预设的标签解析模块中，将所述WEB标签进行分类，生成子类标签，对于几何子类标签，根据所述几何子类标签的坐标和粗细，通过Graphic Box和Graphic Symbol生成打印指令，对于条码子类标签和二维码子类标签，使用ZXing库生成条码图片和二维码图片，根据所述条码图片和所述二维码图片，通过Code 128Barcode将所述条码图片和所述二维码图片转换为ASCII符号表示的打印指令，对于文字子类标签，结合所述文字子类标签的字体，大小和坐标生成文本图片，通过ASCII Text将所述文本图片转换为ASCII符号表示的打印指令；

根据所述打印指令，通过指令组装模块，将所述打印指令进行缩放和对齐，得到标准化打印指令，将所述标准化打印指令根据生成顺序叠加，得到所述打印标签。

6.根据权利要求5所述的方法，其特征在于，所述方法还包括标签嵌套规则：

根据所述子类标签，生成标签模板，在所述标签模板中加入嵌套子类标签，所述标签解析模块生成打印指令前对所述标签模板进行解析；

若存在所述嵌套子类标签，则递归处理所述子类标签的全部元素，对于每个子元素，计算所述子元素在父元素中的相对位置和大小，根据所述相对位置和大小，计算所述子元素的实际坐标和尺寸；

根据所述子元素的实际坐标和尺寸，通过布局算法对所述子元素进行计算，生成打印指令；

若不存在则直接生成打印指令。

7.根据权利要求5所述的方法，其特征在于，所述方法还包括动态替换机制：

在所述标签模板中定义占位符，根据所述占位符生成占位符替换规则，根据所述占位符替换规则，并在所述界面结构中生成占位符替换规则配置界面；

所述标签解析模块生成所述打印指令前，对所述标签模板进行解析，若存在占位符，则根据所述占位符的名称查找所述占位符替换规则；

若存在与所述占位符匹配的占位符替换规则，则将所述占位符替换为所述占位符替换规则定义的内容，若不存在与所述占位符匹配的占位符替换规则，则保留所述占位符，并记为错误占位符；

根据所述错误占位符，记录所述保留的占位符对应的内容和属性，得到错误日志。

8.一种基于WEB的标签在线设计及打印系统，其特征在于，包括：

第一单元，用于使用HTML构建界面结构，根据预设的图形处理模块在所述界面结构中添加图形处理库，使用UI库在所述界面结构中添加用户界面库，根据所述用户界面库，所述图形处理库和所述界面结构，通过异步请求上传用户请求，服务器根据所述用户请求生成WEB标签；

第二单元，用于根据所述WEB标签，结合预设的标签解析模块，通过指令集将所述WEB标签解析为打印指令，根据所述打印指令，结合指令组装模块，将所述打印指令组装为打印标签；

第三单元，用于根据所述打印标签，结合驱动模块连接打印机，生成并保留打印记录。

9.一种电子设备，其特征在于，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为调用所述存储器存储的指令，以执行权利要求1至7中任意一项所述的方法。

10.一种计算机可读存储介质，其上存储有计算机程序指令，其特征在于，所述计算机程序指令被处理器执行时实现权利要求1至7中任意一项所述的方法。