CN114296660A - 一种基于Vue框架的标签打印方法 - Google Patents

Abstract

本发明公开了打印领域的一种基于Vue框架的标签打印方法，根据预设画布模板的标识码获取画布模板的ID；将画布模板的ID存入到存储器localStorage中，调取画布模板，转化为画布模板数组；由外接***中获取渲染数据，将渲染数据融入画布模板数组进行渲染，对渲染后的画布模板进行打印；所述画布模板的预设过程，包括：建立空白画布，配置标识码；选择组件添加至空白画布，对组件进行配置，生成画布模板，对画布模板进行保存为JSON字符的格式并生成ID；本发明通过标识码调取预设画布模板提高了开发效率，大大节省了人力资源，减少重复工作所导致资源的浪费；画布模板设计具有灵活性，高效性，可扩展性。

Description

一种基于Vue框架的标签打印方法

技术领域

本发明属于打印领域，具体涉及一种基于Vue框架的标签打印方法。

背景技术

目前，制造业存在供需不平衡、产能不平衡、产销不平衡的普遍痛点，因此，企业开始对生产管理信息***的需求从生产过程特定单元改善转化为：充分调动产能、提高柔性能力，提升整体供应链效率。而在生产线上重要的一个环节，就是标签打印，标签是指产品上的文字图形符号及一切的说明物，标签打印可以通过标签打印***快速的设计出来。

传统的可视化拖拽打印***，是独立的图片文字表格等组件拖拽***，或是独立的内容打印***，标签设计至标签打印的生产过程效率低，不满足打印的业务场景需求，并且用户无法把自己想要的数据在模板中呈现出来。

发明内容

本发明的目的在于提供一种基于Vue框架的标签打印***及方法，解决了生产上重复设计标签，浪费劳动力的问题。

为达到上述目的，本发明所采用的技术方案是：

本发明一方面提供了一种基于Vue框架的标签打印方法，包括：

根据预设画布模板的标识码获取画布模板的ID；

将画布模板的ID存入到存储器localStorage中，调取画布模板的JSON字符串，并转化画布模板的JSON字符串为画布模板数组；

由外接***中获取渲染数据，将渲染数据融入画布模板数组进行渲染，对渲染后的画布模板进行打印；

所述画布模板的预设过程，包括：

建立空白画布，配置标识码；选择组件添加至空白画布，对组件进行配置，生成画布模板，

对画布模板进行保存为JSON字符的格式并生成ID。

优选的，所述组件进行配置后形成图层，对空白画布添加一个或多个图层，生成画布模板。

优选的，建立空白画布的过程包括：以像素为单位设定空白画布的宽和高，并添加空白画布的名称。

优选的，选择组件添加至空白画布的方法，包括：选择文字组件、二维码或条形码组件、表格组件以及图片组件中的一组或多组组件添加至空白画布。

优选的，对文字组件进行配置的方法，包括：通过直接输入文字的形式或者导入数据集的形式添加文字组件的内容；设定文字组件中文字的字体大小、字体粗细、字体倾斜。

优选的，所述数据集根据SQL语句或者API查询数据库表由数据库中获取。

优选的，对二维码或条形码组件进行配置的方法，包括：添加二维码或条形码组件的内容，设定二维码或条形码组件的宽度，高度，容错率。

优选的，对表格组件进行配置的方法，包括：将表格组件设置为二位数组，二位数组中的每个元素代表表格的一个单元格，通过增减二位数组的元素数量改变表格中单元格的数量，并对单元格的行高，行宽，对齐方式以及单元格内的文字进行设定。

与现有技术相比，本发明所达到的有益效果：

本发明根据预设画布模板的标识码获取画布模板的ID；将画布模板的ID存入到存储器localStorage中，调取画布模板的JSON字符串，并转化画布模板的JSON字符串为画布模板数组；由外接数据库中获取渲染数据，将渲染数据融入画布模板数组进行渲染，对渲染后的画布模板进行打印；通过标识码调取预设画布模板提高了开发效率，大大节省了人力资源，减少重复工作所导致资源的浪费；

本发明建立空白画布，配置标识码；选择组件添加至空白画布，对组件进行配置，生成画布模板，对画布模板进行保存为JSON字符的格式并生成ID；画布模板设计具有灵活性，高效性，可扩展性；方便了使用人员能更快更贴合需求的设计需要的画布模板。

附图说明

图1为本发明提供的一种基于Vue框架的标签打印方法的流程图。

图2为本发明提供的画布模板预设过程的流程图。

具体实施方式

下面结合附图对本发明作进一步描述。以下实施例仅用于更加清楚地说明本发明的技术方案，而不能以此来限制本发明的保护范围。

如图1-2所示，一种图像自动生成配色方法，包括：

一种基于Vue框架的标签打印方法，包括：

选择使用画布模板的标识码，使用人员点击相应标识码的按钮，根据预设画布模板的标识码获取画布模板的ID；

将画布模板的ID存入到存储器localStorage中，跨域跳转到标签打印***的预览界面，调取画布模板的JSON字符串，并转化画布模板的JSON字符串为画布模板数组；

由外接MOM***中获取渲染数据，将渲染数据融入画布模板数组进行渲染，在预览页面渲染出来，具体遵循以下渲染规则：字符遵循${数据集.字段名}的规则，取出字符串${}中的所有字符，字段名对应MOM***中获取渲染数据的字段名，将${数据集.字段名}替换成对应字段的数据，例如，获取到的渲染数据是{materialName:’wl123456’},所述组件中字符的内容是‘物料名：${material.materialName}’,替换后的结果为‘物料名：wl123456’。

用Vue框架的<component is＝‘type’>遍历画布模板数组，type为画布模板数组元素中的类型(image，barcode,string,table),用style来承载对组件的配置，就完成了所有图层的渲染；对渲染后的画布模板进行打印；

所述画布模板在Vue框架下进行设计，画布模板数组中的每一个元素是一个图层，而每个图层又是一个组件根据配置渲染出来的，所述画布模板的预设过程，包括：

建立空白画布，配置标识码，以像素为单位设定空白画布的宽和高，并添加空白画布的名称。

选择文字组件、二维码或条形码组件、表格组件以及图片组件中的一组或多组组件添加至空白画布；

文字组件：是一个<p>标签元素。

二维码/条形码组件：是一个<img>标签元素，src对应的二维码的base64值。

表格组件：是多个<table><td>标签组成的元素。

图片组件：是一个<img>标签元素，src对应的图片的base64值。

对文字组件进行配置的方法，包括：通过直接输入文字的形式或者导入数据集的形式添加文字组件的内容；设定文字组件中文字的字体大小、字体粗细、字体倾斜；所述数据集根据SQL语句或者API查询数据库表由数据库中获取。

对二维码或条形码组件进行配置的方法，包括：添加二维码或条形码组件的内容，设定二维码或条形码组件的宽度，高度，容错率。

对表格组件进行配置的方法，包括：将表格组件设置为二位数组，二位数组中的每个元素代表表格的一个单元格，通过增减二位数组的元素数量改变表格中单元格的数量，并对单元格的行高，行宽，对齐方式以及单元格内的文字进行设定。

所述组件进行配置后形成图层，对空白画布添加一个或多个图层，生成画布模板；对画布模板进行保存为JSON字符的格式并生成ID，ID的生成规则是寻找当前画布模板数组的ID最大值，加一后，得到新的组件的ID，当寻找某一个组件时，可以遍历画布模板数组，根据ID找到对应的组件。

本领域内的技术人员应明白，本申请的实施例可提供为方法、***、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(***)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明技术原理的前提下，还可以做出若干改进和变形，这些改进和变形也应视为本发明的保护范围。

Claims (8)

1.一种基于Vue框架的标签打印方法，其特征在于，包括：

根据预设画布模板的标识码获取画布模板的ID；

将画布模板的ID存入到存储器localStorage中，调取画布模板的JSON字符串，并转化画布模板的JSON字符串为画布模板数组；

由外接***中获取渲染数据，将渲染数据融入画布模板数组进行渲染，对渲染后的画布模板进行打印；

所述画布模板的预设过程，包括：

建立空白画布，配置标识码；选择组件添加至空白画布，对组件进行配置，生成画布模板，

对画布模板进行保存为JSON字符的格式并生成ID。

2.根据权利要求1所述的一种基于Vue框架的标签打印方法，其特征在于，所述组件进行配置后形成图层，对空白画布添加一个或多个图层，生成画布模板。

3.根据权利要求1所述的一种基于Vue框架的标签打印方法，其特征在于，建立空白画布的过程包括：以像素为单位设定空白画布的宽和高，并添加空白画布的名称。

4.根据权利要求1所述的一种基于Vue框架的标签打印方法，其特征在于，选择组件添加至空白画布的方法，包括：选择文字组件、二维码或条形码组件、表格组件以及图片组件中的一组或多组组件添加至空白画布。

5.根据权利要求4所述的一种基于Vue框架的标签打印方法，其特征在于，对文字组件进行配置的方法，包括：通过直接输入文字的形式或者导入数据集的形式添加文字组件的内容；设定文字组件中文字的字体大小、字体粗细、字体倾斜。

6.根据权利要求5所述的一种基于Vue框架的标签打印方法，其特征在于，所述数据集根据SQL语句或者API查询数据库表由数据库中获取。

7.根据权利要求4所述的一种基于Vue框架的标签打印方法，其特征在于，对二维码或条形码组件进行配置的方法，包括：添加二维码或条形码组件的内容，设定二维码或条形码组件的宽度，高度，容错率。

8.根据权利要求4所述的一种基于Vue框架的标签打印方法，其特征在于，对表格组件进行配置的方法，包括：将表格组件设置为二位数组，二位数组中的每个元素代表表格的一个单元格，通过增减二位数组的元素数量改变表格中单元格的数量，并对单元格的行高，行宽，对齐方式以及单元格内的文字进行设定。

Images