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

Abstract

The present invention belongs to the technical field of computer software development, and discloses a code conversion method, device, equipment and storage medium based on the Vue framework. After creating an abstract printer base class, a subclass inheriting from the printer base class is created for the ZPL language based on the printer base class; the subclass is used to implement the abstract methods defined by the printer base class to identify and abstract a number of printing instructions; the Vue components are encapsulated according to the number of printing instructions; the encapsulated Vue components are converted into an AST, and a corresponding renderer is customized based on the AST; the renderer is used to generate ZPL code based on the AST, greatly simplifying the process of using applications developed with Vue3 on printing devices, improving development efficiency, reducing the complexity of the system, and reducing the need for professional knowledge. 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.

Description

Technical Field

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

[0002] With the continuous improvement of the informatization level, the demand of enterprises for printing technology has become more diverse and specialized. Especially in logistics, retail and manufacturing industries, a large number of labels, barcodes, etc. need to be printed quickly, and these usually involve the use of ZPL (Zebra Programming Language). As a programming language specifically designed for Zebra printers, although ZPL is powerful, its learning and usage costs are relatively high. For developers without relevant experience, writing and debugging ZPL code is a challenge.

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

[0004] The above content is only used to assist in understanding the technical solution of the present invention, and does not represent an admission that the above content is 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 problem of poor design dependence and flexibility when using Zebra printing technology currently.

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

[0007] After creating an abstract printer base class, create a subclass that inherits from the printer base class for the ZPL language based on the printer base class;

[0008] Use the subclass to implement the abstract methods defined by the printer base class to identify and abstract a number of printing instructions, and the number of printing instructions is associated with common printing instructions of ZPL;

[0009] Package the Vue components according to the number of printing instructions;

[0010] Convert the packaged Vue components into an AST, and customize the corresponding renderer based on the AST;

[0011] Generate ZPL code based on the AST using the renderer.

[0012] In some embodiments, the Vue components at least include: a paper component, a rectangle component, a text component, a QR code component, an image component, and a table row and column component. Among them, the paper component is used to set the paper size and orientation 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 an image file, and the table row and column component is used to create a table layout and manage the arrangement of rows and columns.

[0013] In some embodiments, the encapsulation of the Vue components according to the several printing instructions includes:

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

[0015] In some embodiments, the conversion of the encapsulated Vue components into an AST and the customization of the corresponding renderer based on the AST includes:

[0016] Convert the template part of the encapsulated Vue components into an AST, where the AST is a tree-like representation of the source code, used to represent the structure and syntax elements of the code, but does not include 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, the generation of ZPL code based on the AST using the renderer includes:

[0019] Use the renderer to traverse the AST, and generate the 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.

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

[0021] Define the DPI attribute in the abstract printer base class, store the DPI setting of the current printing task through the DPI attribute, and use the DPI attribute to adjust the resolution of the print output;

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

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

[0024] Obtain the DPI setting of the printer;

[0025] Convert the page unit of the current printing task to printer pixels based on the DPI setting;

[0026] Respond to the printing task based on the printer pixels.

[0027] In addition, to achieve the above object, the present invention also provides a code conversion device based on the Vue framework. The code conversion device based on the Vue framework includes:

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

[0029] An identification module for using the subclass to implement the abstract methods defined by the printer base class to identify and abstract a number of printing instructions, and the number of printing instructions is associated with the common printing instructions of ZPL;

[0030] A packaging module for packaging Vue components according to the number of printing instructions;

[0031] A conversion module for converting the packaged Vue components into an AST and customizing a corresponding renderer based on the AST;

[0032] A generation module for generating ZPL code based on the AST using the renderer.

[0033] In addition, to achieve the above object, the present invention also provides a code conversion device based on the Vue framework. 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 on the memory and executable on the processor. 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 object, the present invention also provides 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] After creating an abstract printer base class, the present invention creates a subclass that inherits from the printer base class for the ZPL language based on the printer base class; uses the subclass to implement the abstract methods defined by the printer base class to identify and abstract a number of print instructions, and the number of print instructions is associated with common print instructions of ZPL; encapsulates Vue components according to the number of print instructions; converts the encapsulated Vue components into an AST, and customizes a corresponding renderer based on the AST; uses the renderer to generate ZPL code based on the AST. Through the above method, the process of developing an application using Vue3 on a printing device is greatly simplified, the development efficiency is improved, the complexity of the system is reduced, and the need for professional knowledge is reduced, making the printing technology more user-friendly for non-professional users. At the same time, the compatibility and applicability of the system are improved, and the problems of design dependence and poor flexibility currently existing in using Zebra printing technology can be effectively avoided. BRIEF DESCRIPTION OF THE DRAWINGS

[0036] Figure 1 It is a schematic flowchart of the first embodiment of the code conversion method based on the Vue framework of the present invention;

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

[0038] Figure 3 It 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, functional features and advantages of the object of the present invention will be further described with reference to the embodiments and the accompanying drawings. DETAILED DESCRIPTION OF THE EMBODIMENTS

[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 embodiments of the present invention provide a code conversion method based on the Vue framework, with reference to Figure 1 , Figure 1 It is a schematic flowchart of the 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 that inherits from the printer base class for the ZPL language based on the printer base class.

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

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

[0046] To solve the above technical problems, this embodiment develops a tool that can automatically convert modern front-end technologies (such as Vue3) into ZPL. It can not only reduce the learning and usage difficulties, but also improve the 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 dedicated software. This not only reduces 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, reduce the demand for professional knowledge, and make printing technology more user-friendly for non-professional users. At the same time, improve the compatibility and applicability of the system. Specifically, it can be implemented in the following way. The overall process schematic diagram can be referred to Figure 2 as shown.

[0047] In a specific implementation, in this embodiment, it is necessary to first construct an abstract printer base class. Considering the differences between page description languages (such as ZPL, EPL, etc.), we propose an abstract printer class (AbstractPrinter), which can conveniently adapt to the "dialects" of different printer languages. This design allows for the quick implementation of support for new printing languages by inheriting the abstract class and overriding the interfaces. Define the 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 the printing task, processing the printing data, sending the printing command to the printer, etc.

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

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

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

[0051] The above-mentioned constructed abstract printer base class defines the interfaces and basic functions common to all supported printer languages. Therefore, the corresponding methods are defined in the abstract class by the above-mentioned subclass to support the printing of these components. Define a printText() method for the text component, which accepts the text content and style parameters and converts them into corresponding printing commands internally.

[0052] Step S30: Package the Vue components according to the number of printing instructions.

[0053] Packaging the basic components includes component abstraction, specifically mapping each Vue component to the corresponding printing instruction, which is a common printing instruction associated with ZPL, such as text, image, barcode, etc. These commands are packaged 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 components in this embodiment at least include: a paper component, a rectangle component, a text component, a QR code component, an image component, and a table row and column component. Among them, the paper component is used to set the paper size and orientation 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 an image file, and the table row and column component is used to create a table layout and manage the arrangement of rows and columns. When performing a printing instruction mapping, 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 image component is mapped to a printing instruction for processing and printing an image file, 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.

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

[0056] The conversion process is specifically to convert the template part of the encapsulated Vue component into an AST. Among them, the AST is a tree-like representation of the source code, 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. It should be noted that this renderer does not convert the AST into DOM nodes recognizable by the browser, but converts it into ZPL code.

[0057] Step S50: Use the renderer to generate ZPL code based on the AST.

[0058] For each Vue component, the renderer will analyze its structure and style definitions, and convert this information into ZPL format. For example, a simple button in Vue may just be a button tag with text, and after being converted into ZPL, it will be a series of instructions for controlling the printer to print the button pattern 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 a Vue application, there are often requirements for data binding and dynamic content updates. The custom renderer also needs to be able to handle this dynamicity, that is, when the Vue data is updated, it can regenerate the corresponding ZPL code and ensure the real-time update of the printed content.

[0060] In some embodiments, 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 a printer can print per inch of length, directly affecting the fineness and quality of print output. Define the DPI property: Define a DPI property in the AbstractPrinter class to store the DPI settings for the current printing task. This property affects the resolution of all print outputs. Specifically, define the DPI property in the abstract printer base class, store the DPI settings for the current printing task through the DPI property, and the DPI property is used to adjust the resolution of print output; adjust the DPI settings for the current printing task based on the user's printing requirements. The printing requirements correspond to different print contents and quality requirements. For example, the user can adjust the DPI according to different printing requirements. For instance, high-quality art printing may require a higher DPI, while daily label printing can use a lower DPI to save ink and improve printing speed. The above method can optimize the output quality according to different printing requirements by precisely controlling the DPI, making the print results clearer and finer, and the user can adjust the DPI settings according to the specific print content and quality requirements, providing more flexibility and customization options.

[0061] Further, to ensure size consistency, obtain the DPI settings of the printer; convert the page units of the current printing task to printer pixel points based on the DPI settings; respond to the printing task based on the printer pixel points. The printer pixel points can ensure that the print 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 precise conversion from page units to printer pixels, especially in multi-platform and cross-device environments.

[0062] In this embodiment, after creating an abstract printer base class, a subclass that inherits from the printer base class is created for the ZPL language based on the printer base class; the subclass is used to implement the abstract methods defined by the printer base class to identify and abstract a number of print instructions, and the number of print instructions is associated with the common print instructions of ZPL; the Vue component is encapsulated according to the number of print instructions; the encapsulated Vue component is converted into an AST, and a corresponding renderer is customized based on the AST; the renderer is used to generate ZPL code based on the AST. Through the above method, the process of developing an application using Vue3 on a printing device is greatly simplified, the development efficiency is improved, the complexity of the system is reduced, and the demand for professional knowledge is reduced, making the printing technology more user-friendly for non-professional users. At the same time, the compatibility and applicability of the system are improved, and the problems of design dependence and poor flexibility currently existing in using Zebra printing technology can be effectively avoided.

[0063] In addition, an embodiment of the present invention further provides 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] Refer to Figure 3 , Figure 3 which is the structural block diagram of the first embodiment of the code conversion device based on the Vue framework of the present invention.

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

[0066] A creation module 10, configured to create a subclass that inherits from the printer base class for the ZPL language based on the printer base class after creating an abstract printer base class.

[0067] An identification module 20, configured to use the subclass to implement the abstract methods defined by the printer base class to identify and abstract a number of print instructions, and the number of print instructions is associated with the common print instructions of ZPL.

[0068] An encapsulation module 30, configured to encapsulate the Vue component according to the number of print instructions.

[0069] A conversion module 40, configured to convert the encapsulated Vue component into an AST, and customize a corresponding renderer based on the AST.

[0070] A generation module 50, configured to generate ZPL code based on the AST using the renderer.

[0071] In this embodiment, after creating an abstract printer base class, a subclass that inherits from the printer base class is created for the ZPL language based on the printer base class; the abstract methods defined by the printer base class are implemented using the subclass to identify and abstract a number of print instructions, and the number of print instructions is associated with common print instructions of ZPL; Vue components are encapsulated according to the number of print instructions; the encapsulated Vue components are converted into an AST, and a corresponding renderer is customized based on the AST; the renderer generates ZPL code based on the AST. By the above method, the process of developing an application using Vue3 on a printing device is greatly simplified, the development efficiency is improved, the complexity of the system is reduced, and the requirement for professional knowledge is reduced, making the printing technology more user-friendly for non-professional users. At the same time, the compatibility and applicability of the system are improved, and the problems of design dependence and poor flexibility currently existing in the use of Zebra printing technology can be effectively avoided.

[0072] In some embodiments, the Vue components at least include: a paper component, a rectangle component, a text component, a QR code component, a picture component, and a table row and column component. Among them, the paper component is used to set the paper size and orientation 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 picture component is used to process and print an image file, and the table row and column component is 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 print instruction. Among them, the paper component is mapped to a print instruction for setting the paper size and orientation of the printing 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 picture component is mapped to a print instruction for processing and printing an image file, and the table row and column component is mapped to a print 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 an AST. The AST is a tree-like 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; the Yoga Layout engine is integrated, and the layout function of the Yoga Layout engine is used to calculate and determine the position and size of each Vue component to customize the renderer.

[0075] In some embodiments, the generating module 50 is configured to traverse the AST by using the renderer and generate corresponding ZPL codes according to the types and attributes of each node, where each node corresponds to a syntax element in the 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 configured to define a DPI attribute in the abstract printer base class, store the DPI setting of the current printing task through the DPI attribute, and the DPI attribute is used to adjust the resolution of the print output; adjust the DPI setting of the current printing task based on the user's printing requirements

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

[0079] An embodiment of the present application further provides a code conversion device based on the Vue framework, including a processor, a communication interface, a memory, and a communication bus. Among them, the processor, the communication interface, and the memory complete mutual communication through the communication bus. The memory is used to store the code conversion program based on the Vue framework; the processor is configured 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 code conversion device based on the Vue framework may be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. This 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 code conversion device based on the Vue framework and other devices.

[0082] The memory may include a Random Access Memory (RAM), or may also include a Non-Volatile Memory (NVM), such as at least one disk memory. Optionally, the memory may also be at least one storage device located far from the aforementioned processor.

[0083] The above-mentioned processor may be a general-purpose processor, including a central processing unit (English: Central Processing Unit, abbreviated: CPU), a network processor (English: Network Processor, abbreviated: NP), etc.; it may also be a digital signal processor (English: Digital Signal Processing, abbreviated: DSP), an application-specific integrated circuit (English: Application Specific Integrated Circuit, abbreviated: ASIC), a field-programmable gate array (English: Field-Programmable Gate Array, abbreviated: FPGA), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components.

[0084] In the above embodiments, it may be implemented in whole or in part by software, hardware, firmware, or any combination thereof. When implemented using software, it may 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 processes or functions described in the embodiments of the present application are generated in whole or in part. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. 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 one website, computer, server, or data center to another website, computer, server, or data center by wire (such as coaxial cable, optical fiber, digital subscriber line (DSL)) or wirelessly (such as infrared, wireless, microwave, etc.). The computer-readable storage medium may be any available medium that the computer can access, or a data storage device such as a server or data center that includes one or more integrated available media. The available medium may be a magnetic medium (for example, a floppy disk, a hard disk, a magnetic tape), an optical medium (for example, a DVD), or a semiconductor medium (for example, a solid state disk (SSD)).

[0085] It should be noted that in this text, relational terms such as first and second are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the terms "comprising", "including" or any other variant thereof are intended to cover non-exclusive inclusion, such that a process, method, article or device comprising a series of elements not only includes those elements but also includes other elements not expressly listed, or elements inherent to such process, method, article or device. Without further limitation, an element defined by the phrase "comprising a..." does not exclude the presence of additional identical elements in the process, method, article or device comprising said element.

[0086] Each embodiment in this specification is described in a related manner. For the same or similar parts among the embodiments, reference can be made to each other. 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 reference can be made to the relevant part of the method embodiment for the related content.

[0087] The above embodiments are only used to illustrate the technical solutions of the present invention and are not intended to limit them. Although the present invention has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that they can still modify the technical solutions recorded in the foregoing embodiments or perform equivalent replacements for some of the technical features. However, such modifications or replacements do not cause the essence of the corresponding technical solutions to deviate 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 for illustration and does not constitute any limitation to the technical solutions of the present invention. In specific applications, those skilled in the art can set according to needs, and the present invention does not limit this.

[0089] It should be noted that the above-described work process is only illustrative and does not limit the protection scope of the present invention. In actual applications, those skilled in the art can select some or all of them according to actual needs to achieve the purpose of the embodiment solution, and no limitation is made here.

[0090] In addition, for the 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, and details will not be repeated here.

[0091] In addition, it should be noted that in this text, the term "comprising", "including" or any other variant thereof is intended to cover non-exclusive inclusion, such that a process, method, article or system comprising a series of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such process, method, article or system. Without further limitation, an element defined by the statement "comprising an..." does not exclude the presence of additional identical elements in the process, method, article or system comprising that element.

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

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

[0094] The above are only the preferred embodiments of the present invention and do not limit the patent scope of the present invention accordingly. Any equivalent structural or equivalent process transformation made by using the description of the specification and drawings of the present invention, or directly or indirectly applied in other related technical fields, shall be equally included in the patent protection scope of the present invention.

[0095] It can be understood that the system provided by the embodiments of the present invention corresponds to the method provided by the embodiments of the present invention. The explanations, examples and beneficial effects of related content can refer to the corresponding parts in the above method.

Claims

1. A code conversion method based on the Vue framework, characterized in that, The code conversion method based on the Vue framework includes: After creating an abstract printer base class, create a subclass that inherits from the printer base class for the ZPL language based on the printer base class; Use the subclass to implement the abstract methods defined by the printer base class to identify and abstract a number of print instructions, and the number of print instructions is related to the common print instructions of ZPL; Encapsulate Vue components according to the number of print instructions, and the Vue components at least include: a paper component, a rectangle component, a text component, a QR code component, a picture component, and a table row and column component; Among them, the encapsulating the Vue components according to the number of print instructions includes: Map each Vue component to the corresponding print instruction respectively. Among them, the paper component is mapped to the print instruction for setting the paper size and orientation of the print task, the rectangle component is mapped to the print instruction for drawing a border or filling a rectangular area, the text component is mapped to the print instruction for printing text, the QR code component is mapped to the print instruction for generating and printing a QR code, the picture component is mapped to the print instruction for processing and printing an image file, and the table row and column component is mapped to the print instruction for creating a table layout and managing the arrangement of rows and columns; Convert the encapsulated Vue components into an AST, and customize the corresponding renderer based on the AST; Among them, the converting the encapsulated Vue components into an AST and customizing the corresponding renderer based on the AST includes: Convert the template part of the encapsulated Vue components into an AST, where the AST is a tree-like representation of the source code, 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; Use the renderer to generate ZPL code based on the AST; Among them, the using the renderer to generate ZPL code based on the AST includes: Use the renderer to traverse the AST, and generate the 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.

2. The code conversion method based on the Vue framework according to claim 1, characterized in that The paper component is used to set the paper size and orientation 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 picture component is used to process and print an image file, and the table row and column component is used to create a table layout and manage the arrangement of rows and columns.

3. The code conversion method based on the Vue framework according to claim 1 or 2, characterized in that The method further includes: Define a DPI attribute in the abstract printer base class, store the DPI setting of the current print task through the DPI attribute, and 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 print requirements.

4. The code conversion method based on the Vue framework according to claim 3, characterized in that The method further includes: Obtain the DPI setting of the printer; Convert the page unit of the current print task into printer pixels based on the DPI setting; Respond to the printing task based on the printer's dot count.

5. A code conversion device based on the Vue framework, characterized in that, The code conversion device based on the Vue framework includes: A creation module, which, after creating an abstract printer base class, creates a subclass that inherits from the printer base class for the ZPL language based on the printer base class; An identification module, which uses the subclass to implement the abstract methods defined by the printer base class to identify and abstract a number of printing instructions, and the number of printing instructions is associated with common printing instructions of ZPL; An encapsulation module, which encapsulates Vue components according to the number of printing instructions, and the Vue components at least include: a paper component, a rectangle component, a text component, a QR code component, an image component, and a table row and column component; Among them, the encapsulation module is further configured to map each Vue component to a corresponding printing instruction respectively. Among them, 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 image component is mapped to a printing instruction for processing and printing an image file, 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; A conversion module, which converts the encapsulated Vue components into an AST and customizes a corresponding renderer based on the AST; Among them, the conversion module is further configured to convert the template part of the encapsulated Vue components into an AST, where the AST is a tree-like representation of the source code, 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; A generation module, which generates ZPL code based on the AST using the renderer; Among them, the generation module is further configured to traverse the AST using the renderer 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.

6. A code conversion device based on the Vue framework, characterized in that, 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 on the memory and executable on the processor. 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 in any one of claims 1 to 4.

7. A storage medium, characterized in that, A code conversion program based on the Vue framework is stored on the storage medium. When the code conversion program based on the Vue framework is executed by a processor, it implements the steps of the code conversion method based on the Vue framework as described in any one of claims 1 to 4.

Images