CN114296660A - Label printing method based on Vue framework - Google Patents
Label printing method based on Vue framework Download PDFInfo
- Publication number
- CN114296660A CN114296660A CN202111597717.5A CN202111597717A CN114296660A CN 114296660 A CN114296660 A CN 114296660A CN 202111597717 A CN202111597717 A CN 202111597717A CN 114296660 A CN114296660 A CN 114296660A
- Authority
- CN
- China
- Prior art keywords
- canvas
- component
- template
- canvas template
- label printing
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Landscapes
- Record Information Processing For Printing (AREA)
Abstract
The invention discloses a label printing method based on an Vue framework in the field of printing, which comprises the steps of acquiring an ID (identity) of a canvas template according to an identification code of a preset canvas template; storing the ID of the canvas template into a localStorage, calling the canvas template and converting the canvas template into a canvas template array; acquiring rendering data from an external system, blending the rendering data into a canvas template array for rendering, and printing the rendered canvas template; the preset process of the canvas template comprises the following steps: establishing a blank canvas and configuring an identification code; selecting a component to be added into a blank canvas, configuring the component to generate a canvas template, storing the canvas template into a JSON character format and generating an ID (identity); according to the invention, the preset canvas template is called through the identification code, so that the development efficiency is improved, the human resources are greatly saved, and the resource waste caused by repeated work is reduced; the canvas template design has flexibility, high efficiency and expandability.
Description
Technical Field
The invention belongs to the field of printing, and particularly relates to a label printing method based on an Vue framework.
Background
Currently, there are general pain points in manufacturing industry, such as unbalanced supply and demand, unbalanced production capacity, and unbalanced production and marketing, so that the need of enterprises for production management information systems is changed from production process specific unit improvement to: the capacity is fully transferred, the flexibility is improved, and the efficiency of the whole supply chain is improved. An important link in the production line is label printing, wherein labels refer to characters, graphic symbols and all explanatory matters on products, and the label printing can be quickly designed through a label printing system.
The traditional visual dragging and printing system is an independent picture, character, table and other component dragging system or an independent content printing system, the efficiency of the label printing production process from label design to label printing is low, the requirement of a printing service scene is not met, and a user cannot display the data wanted by the user in a template.
Disclosure of Invention
The invention aims to provide a label printing system and method based on an Vue framework, which solve the problems of labor waste caused by repeated label design in production.
In order to achieve the purpose, the technical scheme adopted by the invention is as follows:
the invention provides a label printing method based on Vue framework, which comprises the following steps:
acquiring the ID of the canvas template according to the identification code of the preset canvas template;
storing the ID of the canvas template into a memory localStorage, calling a JSON character string of the canvas template, and converting the JSON character string of the canvas template into a canvas template array;
acquiring rendering data from an external system, blending the rendering data into a canvas template array for rendering, and printing the rendered canvas template;
the preset process of the canvas template comprises the following steps:
establishing a blank canvas and configuring an identification code; selecting a component to add to a blank canvas, configuring the component, generating a canvas template,
the canvas template is saved to the format of the JSON characters and an ID is generated.
Preferably, the component is configured to form a layer, and one or more layers are added to the blank canvas to generate the canvas template.
Preferably, the process of creating a blank canvas comprises: the width and height of the blank canvas are set in units of pixels, and the name of the blank canvas is added.
Preferably, the method for selecting the component to be added to the blank canvas comprises the following steps: one or more of a text component, a two-dimensional code or barcode component, a form component, and a picture component are selected for addition to the blank canvas.
Preferably, the method for configuring the text component includes: adding the content of the text component in a form of directly inputting text or importing a data set; and setting the font size, font thickness and font inclination of the characters in the character component.
Preferably, the data set is obtained from a database by querying the database table according to an SQL statement or an API.
Preferably, the method for configuring the two-dimensional code or the barcode component comprises the following steps: and adding the content of the two-dimensional code or the bar code component, and setting the width, the height and the fault tolerance of the two-dimensional code or the bar code component.
Preferably, the method for configuring the form component includes: the table component is set to be a two-bit array, each element in the two-bit array represents one cell of the table, the number of the cells in the table is changed by increasing or decreasing the number of the elements of the two-bit array, and the row height, the row width, the alignment mode and the characters in the cells are set.
Compared with the prior art, the invention has the following beneficial effects:
acquiring the ID of the canvas template according to the identification code of the preset canvas template; storing the ID of the canvas template into a memory localStorage, calling a JSON character string of the canvas template, and converting the JSON character string of the canvas template into a canvas template array; acquiring rendering data from an external database, blending the rendering data into a canvas template array for rendering, and printing the rendered canvas template; the preset canvas template is called through the identification code, so that the development efficiency is improved, the human resources are greatly saved, and the resource waste caused by repeated work is reduced;
the method comprises the steps of establishing a blank canvas and configuring an identification code; selecting a component to be added into a blank canvas, configuring the component to generate a canvas template, storing the canvas template into a JSON character format and generating an ID (identity); the canvas template design has flexibility, high efficiency and expandability; the canvas template which is convenient for a user to quickly and more fit with the design requirement of the requirement is provided.
Drawings
Fig. 1 is a flowchart of a label printing method based on an Vue framework according to the present invention.
FIG. 2 is a flowchart of a canvas template presetting process provided by the present invention.
Detailed Description
The invention is further described below with reference to the accompanying drawings. The following examples are only for illustrating the technical solutions of the present invention more clearly, and the protection scope of the present invention is not limited thereby.
As shown in fig. 1-2, an automatic image color matching method includes:
a label printing method based on Vue framework comprises the following steps:
selecting an identification code of the canvas template, clicking a button of the corresponding identification code by a user, and acquiring an ID of the canvas template according to the identification code of the preset canvas template;
storing the ID of the canvas template into a memory localStorage, jumping to a preview interface of a label printing system in a cross-domain mode, calling a JSON character string of the canvas template, and converting the JSON character string of the canvas template into a canvas template array;
acquiring rendering data from an external MOM system, blending the rendering data into a canvas template array for rendering, rendering on a preview page, and specifically following the following rendering rules: the characters follow the rule of $ { data set, field name }, all the characters in the character string $ { } are taken out, the field names correspond to the field names of rendering data acquired in an MOM system, and the $ { data set, field name } is replaced by data of corresponding fields, for example, the acquired rendering data is { materialName: ' wl123456 ' }, and the content of the characters in the component is ' material name: materialname, the result after substitution is' material name: wl 123456'.
Traversing the canvas template array by using < component is ═ type' > of an Vue frame, wherein the type is the type (image, barcode, string, table) in the elements of the canvas template array, and the configuration of the components is carried by using the style, so that the rendering of all layers is completed; printing the rendered canvas template;
the canvas template is designed under an Vue framework, each element in the canvas template array is an image layer, each image layer is rendered according to configuration by a component, and the preset process of the canvas template comprises the following steps:
establishing a blank canvas, configuring an identification code, setting the width and the height of the blank canvas by taking a pixel as a unit, and adding the name of the blank canvas.
Selecting one or more groups of components from a character component, a two-dimensional code or bar code component, a table component and a picture component to be added to the blank canvas;
and (3) text component: is a < p > tag element.
Two-dimensional code/barcode assembly: is a base64 value of the two-dimensional code corresponding to the < img > tag element, src.
Table component: is an element made up of a plurality of < table > < td > tags.
A picture assembly: is a < img > tag element, src corresponds to the picture's base64 value.
A method of configuring a text component, comprising: adding the content of the text component in a form of directly inputting text or importing a data set; setting the font size, font thickness and font inclination of the characters in the character component; and the data set is obtained from a database according to SQL statements or API query database tables.
The method for configuring the two-dimensional code or the bar code component comprises the following steps: and adding the content of the two-dimensional code or the bar code component, and setting the width, the height and the fault tolerance of the two-dimensional code or the bar code component.
A method of configuring a form component, comprising: the table component is set to be a two-bit array, each element in the two-bit array represents one cell of the table, the number of the cells in the table is changed by increasing or decreasing the number of the elements of the two-bit array, and the row height, the row width, the alignment mode and the characters in the cells are set.
The component is configured to form a layer, one or more layers are added to the blank canvas to generate a canvas template; the canvas template is stored into a JSON character format and an ID is generated, the ID generation rule is to find the maximum ID value of the current canvas template array, after one is added, the ID of a new component is obtained, when a certain component is found, the canvas template array can be traversed, and the corresponding component is found according to the ID.
As will be appreciated by one skilled in the art, embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The present application is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the application. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
The above description is only a preferred embodiment of the present invention, and it should be noted that, for those skilled in the art, several modifications and variations can be made without departing from the technical principle of the present invention, and these modifications and variations should also be regarded as the protection scope of the present invention.
Claims (8)
1. A label printing method based on Vue framework is characterized by comprising the following steps:
acquiring the ID of the canvas template according to the identification code of the preset canvas template;
storing the ID of the canvas template into a memory localStorage, calling a JSON character string of the canvas template, and converting the JSON character string of the canvas template into a canvas template array;
acquiring rendering data from an external system, blending the rendering data into a canvas template array for rendering, and printing the rendered canvas template;
the preset process of the canvas template comprises the following steps:
establishing a blank canvas and configuring an identification code; selecting a component to add to a blank canvas, configuring the component, generating a canvas template,
the canvas template is saved to the format of the JSON characters and an ID is generated.
2. The Vue framework-based label printing method according to claim 1, wherein the component is configured to form layers, and one or more layers are added to an empty canvas to generate a canvas template.
3. The Vue framework-based label printing method according to claim 1, wherein the process of creating a blank canvas comprises: the width and height of the blank canvas are set in units of pixels, and the name of the blank canvas is added.
4. The Vue framework-based label printing method of claim 1, wherein the method for selecting components to add to a blank canvas comprises: one or more of a text component, a two-dimensional code or barcode component, a form component, and a picture component are selected for addition to the blank canvas.
5. The Vue framework-based label printing method according to claim 4, wherein the method for configuring the text component comprises: adding the content of the text component in a form of directly inputting text or importing a data set; and setting the font size, font thickness and font inclination of the characters in the character component.
6. The Vue framework-based label printing method according to claim 5, wherein the data set is obtained from a database by querying the database table according to SQL statements or API.
7. The Vue frame-based label printing method according to claim 4, wherein the method for configuring the two-dimensional code or the bar code component comprises: and adding the content of the two-dimensional code or the bar code component, and setting the width, the height and the fault tolerance of the two-dimensional code or the bar code component.
8. The Vue framework-based label printing method according to claim 4, wherein the method for configuring the form component comprises: the table component is set to be a two-bit array, each element in the two-bit array represents one cell of the table, the number of the cells in the table is changed by increasing or decreasing the number of the elements of the two-bit array, and the row height, the row width, the alignment mode and the characters in the cells are set.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111597717.5A CN114296660A (en) | 2021-12-24 | 2021-12-24 | Label printing method based on Vue framework |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111597717.5A CN114296660A (en) | 2021-12-24 | 2021-12-24 | Label printing method based on Vue framework |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114296660A true CN114296660A (en) | 2022-04-08 |
Family
ID=80968613
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111597717.5A Pending CN114296660A (en) | 2021-12-24 | 2021-12-24 | Label printing method based on Vue framework |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114296660A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115214243A (en) * | 2022-09-19 | 2022-10-21 | 东方合智数据科技(广东)有限责任公司 | Automatic label printing method, system, terminal and storage medium |
| CN116737094A (en) * | 2023-08-15 | 2023-09-12 | 北京谷器数据科技有限公司 | Custom label printing method based on Vue framework |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111046046A (en) * | 2019-12-17 | 2020-04-21 | 南京富士通南大软件技术有限公司 | Customizable automatic driving daily newspaper generation system and method |
| CN111783414A (en) * | 2020-07-20 | 2020-10-16 | 上海乾臻信息科技有限公司 | Label printing template generation method and device |
| CN112596688A (en) * | 2020-12-25 | 2021-04-02 | 百卓网络科技有限公司 | Web end custom printing method based on TinyMCE rich text |
| CN113010170A (en) * | 2021-03-31 | 2021-06-22 | 中国建设银行股份有限公司 | Page rendering method, device, medium and electronic equipment based on Vue3 component |
| CN113743069A (en) * | 2020-05-28 | 2021-12-03 | 华为技术有限公司 | Nameplate drawing system, nameplate drawing device, nameplate drawing method and storage medium |
-
2021
- 2021-12-24 CN CN202111597717.5A patent/CN114296660A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111046046A (en) * | 2019-12-17 | 2020-04-21 | 南京富士通南大软件技术有限公司 | Customizable automatic driving daily newspaper generation system and method |
| CN113743069A (en) * | 2020-05-28 | 2021-12-03 | 华为技术有限公司 | Nameplate drawing system, nameplate drawing device, nameplate drawing method and storage medium |
| CN111783414A (en) * | 2020-07-20 | 2020-10-16 | 上海乾臻信息科技有限公司 | Label printing template generation method and device |
| CN112596688A (en) * | 2020-12-25 | 2021-04-02 | 百卓网络科技有限公司 | Web end custom printing method based on TinyMCE rich text |
| CN113010170A (en) * | 2021-03-31 | 2021-06-22 | 中国建设银行股份有限公司 | Page rendering method, device, medium and electronic equipment based on Vue3 component |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115214243A (en) * | 2022-09-19 | 2022-10-21 | 东方合智数据科技(广东)有限责任公司 | Automatic label printing method, system, terminal and storage medium |
| CN115214243B (en) * | 2022-09-19 | 2022-12-20 | 东方合智数据科技(广东)有限责任公司 | Automatic label printing method, system, terminal and storage medium |
| CN116737094A (en) * | 2023-08-15 | 2023-09-12 | 北京谷器数据科技有限公司 | Custom label printing method based on Vue framework |
| CN116737094B (en) * | 2023-08-15 | 2023-10-27 | 北京谷器数据科技有限公司 | Custom label printing method based on Vue framework |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102169500B (en) | Dynamic service flow display method and device | |
| CN102945287B (en) | JSP data automatic paging JSTL stamp methods | |
| CN114296660A (en) | Label printing method based on Vue framework | |
| CN105094775B (en) | Webpage generation method and device | |
| CN108229614B (en) | Label generation method, computer readable storage medium and system | |
| CN104281995A (en) | Method and device for adding watermark to picture | |
| CN114707474A (en) | Report generation method and device, electronic equipment and computer readable storage medium | |
| CN113223187A (en) | Advertisement finished product image batch manufacturing method, system, equipment and readable storage medium | |
| CN108021629B (en) | Method, device and system for generating advertisement material data | |
| CN112396462A (en) | Crowd circling method and device based on Clickhouse | |
| CN112329413A (en) | Template building method, file generation method, template system, device and computer equipment | |
| CN103839028B (en) | A kind of paper media method and system interactive with reader | |
| CN103577189A (en) | Method and system for realizing query condition | |
| CN114416056A (en) | Page generation method, system, computer equipment and readable storage medium | |
| CN104657479A (en) | Method and system for displaying updated data on webpage | |
| CN104063545A (en) | Method and system for dynamically displaying process tracing diagram | |
| CN106776994A (en) | Application process and system of a kind of technote in engineering form and webpage | |
| CN111401023B (en) | Report generation method, report generation device, server and storage medium | |
| CN112581565B (en) | Method and device for generating multimedia material graph | |
| CN110287459B (en) | Form batch processing method, system, device and storage medium | |
| CN117236624A (en) | Issue repairer recommendation method and apparatus based on dynamic graph | |
| CN108647337B (en) | Format processing method and device for simulation analysis data | |
| CN111158647A (en) | Creative material self-adaptive generation method and device based on structural theory | |
| CN105302567A (en) | Device and method for dynamically generating report template | |
| CN108228116A (en) | Label generating method, computer readable storage medium and system |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |