Code conversion method and device based on Vue framework, equipment and storage medium

Abstract

The invention belongs to the technical field of computer software development, and discloses a code conversion method, device and equipment based on a Vue framework and a storage medium, after an abstract printer base class is created, a subclass inherited from the printer base class is created based on the printer base class for a ZPL language; utilizing the subclasses to realize an abstract method of printer base class definition so as to identify and abstract a plurality of printing instructions; packaging the Vue component according to the plurality of printing instructions; converting the packaged Vue component into AST, and customizing a corresponding renderer based on the AST; a renderer is used for generating the ZPL code based on AST, the process of using an application program developed by Vue3 on printing equipment is greatly simplified, development efficiency is improved, system complexity is reduced, the requirement for professional knowledge is reduced, meanwhile, system compatibility and applicability are improved, and the development cost is reduced. The problems that design dependence and flexibility are poor when a zebra printing technology is used at present can be effectively solved.

Description

Technical Field

[0001] The present invention relates to the technical field of computer software development, and in particular to a code conversion method, device, equipment and storage medium based on a Vue framework. Background Art

[0002] With the continuous improvement of information technology, enterprises' demand for printing technology is becoming more diverse and specialized. Especially in logistics, retail and manufacturing industries, a large number of labels, barcodes, etc. need to be printed quickly, which usually involves the use of ZPL (Zebra Programming Language). ZPL is a programming language designed specifically for Zebra printers. Although it is powerful, it has a high cost to learn and use. For developers without relevant experience, writing and debugging ZPL code is a challenge.

[0003] At present, the application of ZPL often requires specialized design software and printing language knowledge, which is a high threshold for non-professional users. In addition, the use of Zebra printing technology mostly relies on desktop software, which limits its application on multiple platforms and mobile devices, resulting in the current problems of design dependence and poor flexibility when using Zebra printing technology (Zebra Programming Language, ZPL).

[0004] The above contents are only used to assist in understanding the technical solution of the present invention and do not constitute an admission that the above contents are prior art. Summary of the invention

[0005] The main purpose of the present invention is to provide a code conversion method, device, equipment and storage medium based on the Vue framework, aiming to solve the technical problems of design dependence and poor flexibility when using zebra printing technology.

[0006] To achieve the above object, the present invention provides a code conversion method based on the Vue framework, and the code conversion method based on the Vue framework comprises the following steps:

[0007] After creating an abstract printer base class, creating a subclass inherited from the printer base class based on the printer base class in accordance with the ZPL language;

[0008] The subclass is used to implement the abstract method defined by the printer base class to identify and abstract a number of printing instructions, wherein the number of printing instructions are commonly used printing instructions associated with ZPL;

[0009] Encapsulate the Vue component according to the several printing instructions;

[0010] Convert the encapsulated Vue component into AST, and customize the corresponding renderer based on the AST;

[0011] The renderer is used to generate ZPL code based on the AST.

[0012] In some embodiments, the Vue component includes at least: a paper component, a rectangle component, a text component, a QR code component, an image component, and a table row and column component, wherein the paper component is used to set the paper size and direction of the printing task, the rectangle component is used to draw a border or fill a rectangular area, the text component is used to print text, the QR code component is used to generate and print a QR code, the image component is used to process and print image files, and the table row and column components are used to create a table layout and manage the arrangement of rows and columns.

[0013] In some embodiments, encapsulating the Vue component according to the plurality of printing instructions includes:

[0014] Map each Vue component to a corresponding printing instruction, wherein the paper component is mapped to a printing instruction for setting the paper size and orientation of the printing task, the rectangle component is mapped to a printing instruction for drawing a border or filling a rectangular area, the text component is mapped to a printing instruction for printing text, the QR code component is mapped to a printing instruction for generating and printing a QR code, the picture component is mapped to a printing instruction for processing and printing image files, and the table row and column component is mapped to a printing instruction for creating a table layout and managing the arrangement of rows and columns.

[0015] In some embodiments, converting the encapsulated Vue component into AST and customizing the corresponding renderer based on the AST includes:

[0016] Convert the template part of the encapsulated Vue component into AST, where the AST is a tree representation of the source code, which is used to represent the structure and syntax elements of the code, but does not contain the execution logic of the code;

[0017] Integrate the Yoga Layout engine and use the layout function of the Yoga Layout engine to calculate and determine the position and size of each Vue component to customize the renderer.

[0018] In some embodiments, generating ZPL code based on the AST using the renderer includes:

[0019] The renderer is used to traverse the AST and generate corresponding ZPL code according to the type and attribute of each node, wherein each node corresponds to a syntax element in a template of a Vue component.

[0020] In some embodiments, the method further comprises:

[0021] A DPI attribute is defined in the abstract printer base class, and a DPI setting of a current print task is stored through the DPI attribute, wherein the DPI attribute is used to adjust the resolution of the print output;

[0022] Adjust the DPI setting of the current print task based on the user's printing needs.

[0023] In some embodiments, the method further comprises:

[0024] Get the printer's DPI setting;

[0025] Converting the page unit of the current print task into printer pixels based on the DPI setting;

[0026] Respond to the print job based on the number of pixels of the printer.

[0027] In addition, to achieve the above purpose, the present invention also proposes a code conversion device based on the Vue framework, and the code conversion device based on the Vue framework includes:

[0028] A creation module, used for creating a subclass inherited from the printer base class based on the printer base class in the ZPL language after creating an abstract printer base class;

[0029] An identification module, used for implementing the abstract method defined by the printer base class by using the subclass to identify and abstract a number of printing instructions, wherein the number of printing instructions are commonly used printing instructions associated with ZPL;

[0030] A packaging module, used for packaging the Vue component according to the plurality of printing instructions;

[0031] The conversion module is used to convert the encapsulated Vue component into AST and customize the corresponding renderer based on the AST;

[0032] A generation module is used to generate ZPL code based on the AST using the renderer.

[0033] In addition, to achieve the above-mentioned purpose, the present invention also proposes a code conversion device based on the Vue framework, and the code conversion device based on the Vue framework includes: a memory, a processor, and a code conversion program based on the Vue framework stored in the memory and executable on the processor, and the code conversion program based on the Vue framework is configured to implement the steps of the code conversion method based on the Vue framework as described above.

[0034] In addition, to achieve the above-mentioned purpose, the present invention also proposes a storage medium, on which a code conversion program based on the Vue framework is stored. When the code conversion program based on the Vue framework is executed by a processor, the steps of the code conversion method based on the Vue framework as described above are implemented.

[0035] The present invention creates a subclass inherited from the printer base class based on the printer base class for ZPL language after creating an abstract printer base class; uses the subclass to implement the abstract method defined by the printer base class to identify and abstract a number of printing instructions, wherein the plurality of printing instructions are commonly used printing instructions associated with ZPL; encapsulates a Vue component according to the plurality of printing instructions; converts the encapsulated Vue component into AST, and customizes a corresponding renderer based on the AST; uses the renderer to generate ZPL code based on the AST. The above method greatly simplifies the process of using Vue3 to develop applications on a printing device, improves development efficiency, reduces system complexity, and reduces the need for professional knowledge, making printing technology more friendly to non-professional users. At the same time, it improves the compatibility and applicability of the system, and can effectively avoid the problems of design dependence and poor flexibility currently existing when using Zebra printing technology. BRIEF DESCRIPTION OF THE DRAWINGS

[0036] Figure 1 This is a flow chart of the first embodiment of the code conversion method based on the Vue framework of the present invention;

[0037] Figure 2 It is a flow chart of the overall technical solution of the code conversion method based on the Vue framework of the present invention;

[0038] Figure 3 This is a structural block diagram of the first embodiment of the code conversion device based on the Vue framework of the present invention.

[0039] The realization of the purpose, functional features and advantages of the present invention will be further explained in conjunction with embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION

[0040] It should be understood that the specific embodiments described herein are only used to explain the present invention, and are not used to limit the present invention.

[0041] The embodiment of the present invention provides a code conversion method based on the Vue framework, referring to Figure 1 , Figure 1 The figure is a flowchart of a first embodiment of a code conversion method based on the Vue framework of the present invention.

[0042] In this embodiment, the code conversion method based on the Vue framework includes the following steps:

[0043] Step S10: After creating an abstract printer base class, create a subclass inheriting from the printer base class based on the printer base class in accordance with the ZPL language.

[0044] In this embodiment, the executor of this embodiment is a code conversion device based on the Vue framework, wherein the code conversion device based on the Vue framework has functions such as data processing, data communication and program running. The code conversion device based on the Vue framework can be a computer terminal device or other network device, and of course it can also be other devices with similar functions, and this embodiment does not limit this.

[0045] It should be noted that with the continuous improvement of the level of informatization, enterprises' demand for printing technology is becoming more diverse and specialized. Especially in logistics, retail and manufacturing, a large number of labels, barcodes, etc. need to be printed quickly, which usually involves the use of ZPL (Zebra Programming Language). As a programming language designed specifically for Zebra printers, ZPL is powerful, but its learning and use costs are high. For developers who do not have relevant experience, writing and debugging ZPL code is a challenge. At present, the application of ZPL often requires special design software and printing language knowledge, which is a high threshold for non-professional users. In addition, the use of Zebra printing technology mostly relies on desktop software, which limits its application on multiple platforms and mobile devices, resulting in the current problems of design dependence and poor flexibility when using Zebra printing technology (Zebra Programming Language, ZPL).

[0046] In order to solve the above technical problems, this embodiment develops a tool that can automatically convert modern front-end technology (such as Vue3) into ZPL, which can not only reduce the difficulty of learning and use, but also improve development efficiency and application flexibility. At the same time, it provides a Web-based solution that allows users to design and print labels directly in the browser without installing any special software. This not only lowers the technical threshold, but also makes the label design and printing process more convenient and accessible. The purpose of this embodiment is to simplify the design and printing process and reduce the need for professional knowledge, making printing technology more friendly to non-professional users. At the same time, improving the compatibility and applicability of the system can be achieved in the following way. The overall process diagram can be referred to Figure 2 shown.

[0047] In the specific implementation, this embodiment needs to first construct an abstract printer base class. Taking into account the differences between page description languages ​​(such as ZPL, EPL, etc.), we propose an abstract printer class (AbstractPrinter), which can easily adapt to the "dialects" of different printer languages. This design allows for quick support for new printing languages ​​by inheriting abstract classes and rewriting interfaces. Define an abstract printer class: Create an abstract class AbstractPrinter, which defines the interfaces and basic functions common to all supported printer languages. These basic functions include initializing print tasks, processing print data, sending print commands to the printer, etc.

[0048] It should be noted that for a specific printer language such as EPL, you can create a subclass EPLPrinter that inherits from AbstractPrinter and implement specific method logic in this subclass, such as adjusting the implementation of the printText() method to generate an EPL-specific command format.

[0049] Through this abstraction and inheritance architecture, new printer language support can be easily implemented by adding new subclasses. This design not only improves code reusability, but also reduces maintenance costs, because common functions only need to be implemented once in the abstract class.

[0050] Step S20: using the subclass to implement the abstract method defined by the printer base class to identify and abstract a number of printing instructions.

[0051] The abstract printer base class constructed above defines the interface and basic functions common to all supported printer languages, so corresponding methods are defined in the abstract class through the above subclasses to support the printing of these components. A printText() method is defined for the text component, which accepts text content and style parameters and converts them into corresponding print commands internally.

[0052] Step S30: encapsulating the Vue component according to the plurality of printing instructions.

[0053] The encapsulated basic components include component abstraction, which specifically maps each Vue component to the corresponding printing instruction. The printing instruction is a commonly used printing instruction associated with ZPL, such as text, image, barcode, etc. These commands are encapsulated into a series of basic components (Basic Components). It should be noted that each component corresponds to one or more instructions in ZPL.

[0054] The Vue component in this embodiment includes at least: a paper component, a rectangle component, a text component, a QR code component, an image component, and a table row and column component, wherein the paper component is used to set the paper size and direction of the print task, the rectangle component is used to draw a border or fill a rectangular area, the text component is used to print text, the QR code component is used to generate and print a QR code, the image component is used to process and print image files, and the table row and column components are used to create a table layout and manage the arrangement of rows and columns. When mapping print instructions, the paper component is mapped to a print instruction for setting the paper size and direction of the print task, the rectangle component is mapped to a print instruction for drawing a border or filling a rectangular area, the text component is mapped to a print instruction for printing text, the QR code component is mapped to a print instruction for generating and printing a QR code, the image component is mapped to a print instruction for processing and printing image files, and the table row and column components are mapped to a print instruction for creating a table layout and managing the arrangement of rows and columns.

[0055] Step S40: convert the encapsulated Vue component into AST, and customize the corresponding renderer based on the AST.

[0056] The conversion process is to convert the template part of the encapsulated Vue component into AST, where the AST is a tree representation of the source code, which is used to represent the structure and syntax elements of the code, but does not contain the execution logic of the code; integrate the Yoga Layout engine, and use the layout function of the Yoga Layout engine to calculate and determine the position and size of each Vue component to customize the renderer. It should be noted that this renderer does not convert the AST into a DOM node that the browser can recognize, but converts it into ZPL code.

[0057] Step S50: Generate ZPL code based on the AST using the renderer.

[0058] For each Vue component, the renderer will analyze its structure and style definition and convert this information into ZPL format. For example, a simple button may be just a button tag with text in Vue, but after being converted into ZPL, it will be a series of instructions for controlling the printer to print button patterns and text. Specifically, the renderer can be used to traverse the AST and generate corresponding ZPL code according to the type and attributes of each node, where each node corresponds to a syntax element in the template of a Vue component.

[0059] Furthermore, in Vue applications, there is often a need for data binding and dynamic content updates. Custom renderers also need to be able to handle this dynamism, that is, when Vue data is updated, the corresponding ZPL code can be regenerated and the printed content can be updated in real time.

[0060] In some embodiments, in order to improve the quality and adaptability of print output, the concept of DPI (dots per inch) is introduced in the abstract printer base class AbstractPrinter. DPI is a key parameter that defines the number of dots that a printer can print per inch, which directly affects the fineness and quality of the print output. Define DPI attribute: A DPI attribute is defined in the AbstractPrinter class to store the DPI setting of the current print task. This attribute affects the resolution of all print outputs. Specifically, the DPI attribute is defined in the abstract printer base class, and the DPI setting of the current print task is stored through the DPI attribute. The DPI attribute is used to adjust the resolution of the print output; the DPI setting of the current print task is adjusted based on the user's printing needs. The printing needs correspond to different printing contents and quality requirements. For example, the user may adjust the DPI according to different printing needs. For example, high-quality art printing may require a higher DPI, while daily label printing can use a lower DPI to save ink and increase printing speed. The above method can optimize the output quality according to different printing requirements by precisely controlling the DPI, making the printing results clearer and more detailed, and users can adjust the DPI settings according to specific printing content and quality requirements, providing more flexibility and customization options.

[0061] Furthermore, in order to ensure size consistency, the DPI setting of the printer is obtained; based on the DPI setting, the page units of the current print task are converted into printer pixels; based on the printer pixels, the print task is responded to, and the printer pixels can ensure that the printed content is correctly scaled and positioned on the page. The above method can ensure the consistency of different sizes and layouts on various printing devices through the accurate conversion of page units to printer pixels, especially in multi-platform and cross-device environments.

[0062] This embodiment creates a subclass that inherits from the printer base class based on the printer base class for the ZPL language after creating an abstract printer base class; uses the subclass to implement the abstract method defined by the printer base class to identify and abstract a number of printing instructions, which are commonly used printing instructions associated with ZPL; encapsulates the Vue component according to the printing instructions; converts the encapsulated Vue component into AST, and customizes the corresponding renderer based on the AST; uses the renderer to generate ZPL code based on the AST. The above method greatly simplifies the process of using Vue3 to develop applications on printing devices, improves development efficiency, reduces system complexity, and reduces the need for professional knowledge, making printing technology more friendly to non-professional users. At the same time, it improves the compatibility and applicability of the system, and can effectively avoid the current problems of design dependence and poor flexibility when using Zebra printing technology.

[0063] In addition, an embodiment of the present invention further proposes a storage medium, on which a code conversion program based on the Vue framework is stored. When the code conversion program based on the Vue framework is executed by a processor, the steps of the code conversion method based on the Vue framework as described above are implemented.

[0064] Reference Figure 3 , Figure 3 This is a structural block diagram of the first embodiment of the code conversion device based on the Vue framework of the present invention.

[0065] like Figure 3 As shown, the code conversion device based on the Vue framework proposed in the embodiment of the present invention includes:

[0066] The creation module 10 is used to create a subclass inherited from the printer base class based on the printer base class in the ZPL language after creating the abstract printer base class.

[0067] The identification module 20 is used to implement the abstract method defined by the printer base class using the subclass to identify and abstract a number of printing instructions, wherein the number of printing instructions are commonly used printing instructions associated with ZPL.

[0068] The encapsulation module 30 is used to encapsulate the Vue component according to the plurality of printing instructions.

[0069] The conversion module 40 is used to convert the encapsulated Vue component into AST, and customize the corresponding renderer based on the AST.

[0070] The generating module 50 is used to generate ZPL code based on the AST by using the renderer.

[0071] This embodiment creates a subclass that inherits from the printer base class based on the printer base class for the ZPL language after creating an abstract printer base class; uses the subclass to implement the abstract method defined by the printer base class to identify and abstract a number of printing instructions, which are commonly used printing instructions associated with ZPL; encapsulates the Vue component according to the printing instructions; converts the encapsulated Vue component into AST, and customizes the corresponding renderer based on the AST; uses the renderer to generate ZPL code based on the AST. The above method greatly simplifies the process of using Vue3 to develop applications on printing devices, improves development efficiency, reduces system complexity, and reduces the need for professional knowledge, making printing technology more friendly to non-professional users. At the same time, it improves the compatibility and applicability of the system, and can effectively avoid the current problems of design dependence and poor flexibility when using Zebra printing technology.

[0072] In some embodiments, the Vue component includes at least: a paper component, a rectangle component, a text component, a QR code component, an image component, and a table row and column component, wherein the paper component is used to set the paper size and direction of the printing task, the rectangle component is used to draw a border or fill a rectangular area, the text component is used to print text, the QR code component is used to generate and print a QR code, the image component is used to process and print image files, and the table row and column components are used to create a table layout and manage the arrangement of rows and columns.

[0073] In some embodiments, the encapsulation module 30 is used to map each Vue component to a corresponding printing instruction, wherein the paper component is mapped to a printing instruction for setting the paper size and orientation of the printing task, the rectangle component is mapped to a printing instruction for drawing a border or filling a rectangular area, the text component is mapped to a printing instruction for printing text, the QR code component is mapped to a printing instruction for generating and printing a QR code, the picture component is mapped to a printing instruction for processing and printing image files, and the table row and column component is mapped to a printing instruction for creating a table layout and managing the arrangement of rows and columns.

[0074] In some embodiments, the conversion module 40 is used to convert the template part of the encapsulated Vue component into AST, wherein the AST is a tree representation of the source code, which is used to represent the structure and syntax elements of the code, but does not include the execution logic of the code; integrate the Yoga Layout engine, and use the layout function of the Yoga Layout engine to calculate and determine the position and size of each Vue component to customize the renderer.

[0075] In some embodiments, the generation module 50 is used to traverse the AST using the renderer, and generate corresponding ZPL code according to the type and attributes of each node, wherein each node corresponds to a syntax element in a template of a Vue component.

[0076] In some embodiments, the code conversion device based on the Vue framework further includes an adjustment module;

[0077] The adjustment module is used to define a DPI attribute in the abstract printer base class, store the DPI setting of the current print task through the DPI attribute, and adjust the DPI setting of the current print task based on the user's printing needs.

[0078] In some embodiments, the adjustment module is used to obtain the DPI setting of the printer; convert the page unit of the current print task into the printer pixel number based on the DPI setting; and respond to the print task based on the printer pixel number.

[0079] An embodiment of the present application also provides a code conversion device based on the Vue framework, including a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory communicate with each other through the communication bus, and the memory is used to store a code conversion program based on the Vue framework; the processor is used to implement the above-mentioned code conversion method based on the Vue framework when executing the program stored in the memory.

[0080] The communication bus mentioned in the above-mentioned code conversion device based on the Vue framework can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. The communication bus can be divided into an address bus, a data bus, a control bus, etc.

[0081] The communication interface is used for communication between the above-mentioned Vue framework-based code conversion device and other devices.

[0082] The memory may include a random access memory (RAM) or a non-volatile memory (NVM), such as at least one disk memory. Optionally, the memory may also be at least one storage device located away from the aforementioned processor.

[0083] The above-mentioned processor can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA) or other programmable logic devices, discrete gates or transistor logic devices, and discrete hardware components.

[0084] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function described in the embodiment of the present application is generated in whole or in part. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions may be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium, for example, the computer instructions may be transmitted from a website site, computer, server or data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) mode to another website site, computer, server or data center. The computer-readable storage medium may be any available medium that a computer can access or a data storage device such as a server or data center that includes one or more available media integrated. The available medium may be a magnetic medium, (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid-state drive Solid State Disk (SSD)), etc.

[0085] It should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the existence of other identical elements in the process, method, article or device including the elements.

[0086] Each embodiment in this specification is described in a related manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the system embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0087] The above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit the same. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that the technical solutions described in the aforementioned embodiments may still be modified, or some of the technical features may be replaced by equivalents. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention.

[0088] It should be understood that the above is only an example and does not constitute any limitation on the technical solution of the present invention. In specific applications, technicians in this field can make settings as needed, and the present invention does not limit this.

[0089] It should be noted that the workflow described above is merely illustrative and does not limit the scope of protection of the present invention. In practical applications, technicians in this field can select part or all of them according to actual needs to achieve the purpose of the present embodiment, and no limitation is made here.

[0090] In addition, for technical details not described in detail in this embodiment, reference can be made to the code conversion method based on the Vue framework provided in any embodiment of the present invention, which will not be repeated here.

[0091] In addition, it should be noted that, in this article, the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article or system including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or system. In the absence of further restrictions, an element defined by the sentence "comprises a ..." does not exclude the existence of other identical elements in the process, method, article or system including the element.

[0092] The serial numbers of the above embodiments of the present invention are only for description and do not represent the advantages or disadvantages of the embodiments.

[0093] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present invention, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as a read-only memory (ROM) / RAM, a magnetic disk, or an optical disk), and includes a number of instructions for a terminal device (which can be a mobile phone, a computer, a server, or a network device, etc.) to execute the methods described in each embodiment of the present invention.

[0094] The above are only preferred embodiments of the present invention, and are not intended to limit the patent scope of the present invention. Any equivalent structure or equivalent process transformation made using the contents of the present invention specification and drawings, or directly or indirectly applied in other related technical fields, are also included in the patent protection scope of the present invention.

[0095] It is understandable that the system provided by the embodiment of the present invention corresponds to the method provided by the embodiment of the present invention, and the explanation, examples and beneficial effects of the relevant contents can refer to the corresponding parts in the above method.

Claims

1. A code conversion method based on Vue framework, characterized in that: The code conversion method based on the Vue framework includes: After creating an abstract printer base class, creating a subclass inherited from the printer base class based on the printer base class in accordance with the ZPL language; The subclass is used to implement the abstract method defined by the printer base class to identify and abstract a number of printing instructions, wherein the number of printing instructions are commonly used printing instructions associated with ZPL; Encapsulate the Vue component according to the several printing instructions; Convert the encapsulated Vue component into AST, and customize the corresponding renderer based on the AST; The renderer is used to generate ZPL code based on the AST.

2. The code conversion method based on the Vue framework as claimed in claim 1, characterized in that: The Vue component includes at least: a paper component, a rectangle component, a text component, a QR code component, an image component, and a table row and column component, wherein the paper component is used to set the paper size and direction of the printing task, the rectangle component is used to draw a border or fill a rectangular area, the text component is used to print text, the QR code component is used to generate and print a QR code, the image component is used to process and print image files, and the table row and column components are used to create a table layout and manage the arrangement of rows and columns.

3. The code conversion method based on the Vue framework as claimed in claim 2, characterized in that: The encapsulating the Vue component according to the plurality of printing instructions comprises: Map each Vue component to a corresponding printing instruction, wherein the paper component is mapped to a printing instruction for setting the paper size and orientation of the printing task, the rectangle component is mapped to a printing instruction for drawing a border or filling a rectangular area, the text component is mapped to a printing instruction for printing text, the QR code component is mapped to a printing instruction for generating and printing a QR code, the picture component is mapped to a printing instruction for processing and printing image files, and the table row and column component is mapped to a printing instruction for creating a table layout and managing the arrangement of rows and columns.

4. The code conversion method based on the Vue framework as claimed in claim 1, characterized in that: The encapsulated Vue component is converted into AST, and the corresponding renderer is customized based on the AST, including: Convert the template part of the encapsulated Vue component into AST, where the AST is a tree representation of the source code, which is used to represent the structure and syntax elements of the code, but does not contain the execution logic of the code; Integrate the Yoga Layout engine and use the layout function of the Yoga Layout engine to calculate and determine the position and size of each Vue component to customize the renderer.

5. The code conversion method based on the Vue framework as claimed in claim 1, characterized in that: The generating ZPL code based on the AST by using the renderer includes: The renderer is used to traverse the AST and generate corresponding ZPL code according to the type and attribute of each node, wherein each node corresponds to a syntax element in a template of a Vue component.

6. The code conversion method based on the Vue framework as claimed in any one of claims 1 to 5, characterized in that: The method further comprises: A DPI attribute is defined in the abstract printer base class, and a DPI setting of a current print task is stored through the DPI attribute, wherein the DPI attribute is used to adjust the resolution of the print output; Adjust the DPI setting of the current print task based on the user's printing needs.

7. The code conversion method based on the Vue framework as claimed in claim 6, characterized in that: The method further comprises: Get the printer's DPI setting; Converting the page unit of the current print task into printer pixels based on the DPI setting; The print job is responded to based on the number of pixels of the printer.

8. A code conversion device based on Vue framework, characterized in that: The code conversion device based on the Vue framework includes: A creation module, used for creating a subclass inherited from the printer base class based on the printer base class in the ZPL language after creating an abstract printer base class; An identification module, used for implementing the abstract method defined by the printer base class by using the subclass to identify and abstract a number of printing instructions, wherein the number of printing instructions are commonly used printing instructions associated with ZPL; A packaging module, used for packaging the Vue component according to the plurality of printing instructions; The conversion module is used to convert the encapsulated Vue component into AST and customize the corresponding renderer based on the AST; A generation module is used to generate ZPL code based on the AST using the renderer.

9. A code conversion device based on the Vue framework, characterized in that: The Vue framework-based code conversion device includes: a memory, a processor, and a Vue framework-based code conversion program stored in the memory and executable on the processor, wherein the Vue framework-based code conversion program is configured to implement the steps of the Vue framework-based code conversion method as described in any one of claims 1 to 7.

10. A storage medium, characterized in that: The storage medium stores a code conversion program based on the Vue framework, and when the code conversion program based on the Vue framework is executed by the processor, the steps of the code conversion method based on the Vue framework as described in any one of claims 1 to 7 are implemented.

Images