Implementation of barcode and two-dimensional code generation and print processing _javascript techniques based on bootstrap metronic framework

In many projects, the barcode and two-dimensional code generation and printing is also a very common operation, in the Web project, we can use JS to generate barcodes and two-dimensional code components have a lot. This paper introduces two more widely used JS components to handle the generation of barcode and two-dimensional code, and describes how to use the Clodop component to realize the printout of the content.

The generated barcode uses component Jsbarcode to generate two-dimensional code using component Qrcodejs.

1, the production of bar code

The role of bar code in a number of commodity labels, convenient use of bar code gun Fast, accurate input information.
As shown below is a barcode

Barcode generation is processed using the Jsbarcode component, which supports many formats of barcode format, as shown below.

Its simple code example is shown below.

HTML code
<svg id= "barcode" ></svg>
<!--or-->
<canvas id= "Canvas" ></canvas >
<!--or-->

//js code jsbarcode
("#barcode", "hi!");
or with JQuery
$ ("#barcode"). Jsbarcode ("hi!");

The resulting picture format is shown below.

The Jsbarcode component supports the setting of multiple option parameters, as shown in the following code

Jsbarcode ("#barcode", "1234", {
format: "Pharmacode",
linecolor: "#0aa",
width:4,
height:40,
Displayvalue:false
});
Jsbarcode ("#barcode")
. Options ({font: "Ocr-b"})//would affect all barcodes
. EAN13 ("1234567890128", {fontsize:18, textmargin:0})
. Blank//Create space between the barcodes
. EAN5 ("12345", {height:85, textposition: "Top", Fontsize:16, margintop:15})
. render (); 

By introducing the case code for this component, we can learn how to generate regular two-dimensional code.
For example, we added the following HTML code to the interface.

<div class= "Row" id= "BarDiv1" >
<div class= "col-md-4 col-sm-4 col-xs-4" >
Barcode (770 145 896 701): <br/>

</div>
<div class=" Col-md-4 col-sm-4 Col-xs-4 ">
Barcode (770 145 896 702): <br/> 
</div>
<div class= "col-md-4 col-sm-4 col-xs-4" >
Barcodes (770 145 896 703): <br/> 
</div>
</div>

Then through the JS code to achieve two-dimensional code generation.

Use Jsbarcode to generate barcode for
(var i = 1; i < i++) {
var barcodevalue = "77014589670" + i;//prefix + numeric
jsbarcode ( "#barcode" + I, Barcodevalue, {
format: "CODE128",
displayvalue:true, 
fontsize:24,
linecolor: "#0cc"
});
}

Finally, we can see that the specific build effect is shown below.

From here we can see that the use of JS to achieve the production of barcodes is very convenient and concise, colleagues speed is also very good.

2, two-dimensional code generation

Two-dimensional code implementation can be generated by using component Qrcodejs, two-dimensional code can also be generated using component Jquery-qrcode, but also relatively concise, but when printing two-dimensional code documents, Jquery-qrcode does not show two-dimensional code pictures, Component Qrcodejs is working properly, so component Qrcodejs is recommended.

The Qrcodejs component is also simple to use, and the basics are shown below.

<div id= "QRCode" ></div>
<script type= "Text/javascript" >
new QRCode ( document.getElementById ("QRCode"), "Http://jindo.dev.naver.com/collie");

The more complex use of the JS code is shown below.

<div id= "QRCode" ></div>
<script type= "Text/javascript" >
var qrcode = new QRCode ( document.getElementById ("QRCode"), {
text: "Http://jindo.dev.naver.com/collie",
width:128,
height: 128,
Colordark: "#000000",
colorlight: "#ffffff",
correctlevel:qrcode.correctlevel.h
});
</script>

By understanding the use of this component, we can add a real code to the project to test it, as shown below.

<table border= ' 0 ' width= ' 100% ' >
<tr>
<td>
Equipment Two-dimensional code (9001): <br
/> Id= "imgDevice9001" ></div>
</td>
<td>
Equipment Two-dimensional code (9002): <br/> <div
Id= "imgDevice9002" ></div>
</td>
<td>
Equipment Two-dimensional code (9003): <br/> <div
Id= "imgDevice9003" ></div>
</td>
</tr>
<tr style= "height:20px" ><td Colspan= "3" ></td></tr> ...

We can use JS to dynamically generate the related two-dimensional code.

Device picture two-dimensional code for
(var i = 9001 I < 9010; i++) {
var url = "Http://www.iqidi.com/H5/device?devicecode=" + i;
The practice of using Jquery.qrcode
//$ ("#imgDevice" + i). QRCode ({width:100, height:100, Text:url});
$ ("#imgDevice" + i). CSS ("height", "100px");
Use the Qrcodejs approach
var qrcode = new QRCode (document.getElementById ("Imgdevice" + i), {
text:url,
width:128,< c10/>height:128,
colordark: "#000000",
colorlight: "#ffffff",
correctlevel:qrcode.correctlevel.h
});
}

The two-dimensional code generated by the final interface is shown below.

3, barcode and two-dimensional code of the printing process

Introduction of my two-dimensional code and barcode generation, about their printing, you can use the Clodop I introduced to print processing, you need to know can be referred to under the essay Mvc+easyui Web development framework using Cloud Print Control C-LODOP print page or set of Customs waybill information

The printing we are introducing here is also based on the control's printing process.

Of course, if printing, also can use printthis this component to handle (detailed can refer to the essay Bootstrap Metronic Development Framework Experience Summary "Nine" to achieve the Web page content Print preview and save operations), But the overall effect does not have the above Clodop printing effect is good.

The

Print the JS code as shown below, you can use one of the following two functions to process.

Use table format output function printbarcodewithtable () {Lodop = Getlodop (); Lodop.
Print_init ("Barcode _ Format output");
var strhtml = "<table border= ' 0 ' width= ' 100% ' >";
strHTML = strhtml + "<tr><td>";
strHTML = strhtml + $ ("#barDiv1"). html ();
strHTML = strhtml + "</td></tr>";
strHTML = strhtml + "<tr><td>";
strHTML = strhtml + $ ("#barDiv2"). html ();
strHTML = strhtml + "</td></tr>";
strHTML = strhtml + "<tr><td>";
strHTML = strhtml + $ ("#barDiv3"). html ();
strHTML = strhtml + "</td></tr>"; Lodop.
Add_print_table (900, strhtml); Lodop.
Set_show_mode ("Preview_in_browse", 1); Lodop.
PREVIEW ();
///Use paging output function printbarcodewithpaging () {Lodop = Getlodop (); Lodop.
Print_init ("Barcode _ Paging Output"); Lodop.
Add_print_htm (M, m, $, $ ("#barDiv1"). html ()); Lodop.
NewPage (); Lodop.
Add_print_htm (M, m, $, $ ("#barDiv2"). html ()); Lodop.
NewPage (); Lodop.
Add_print_htm (M, m, $, $ ("#barDiv3"). html ()); Lodop.
NewPage (); LOdop.
Set_show_mode ("Preview_in_browse", 1); Lodop.
PREVIEW (); }

The printing effect of the barcode is shown below.

and print two-dimensional code of the JS code as shown below.

Print two-dimensional code
function PrintQrcode2 () {
Createprintdata ($ ("#qrcode"). html ());
Lodop. Set_show_mode ("Preview_in_browse", 1);
Lodop. PREVIEW ();
}
Print data build
function Createprintdata (HTML) {
LODOP = Getlodop ();
Lodop. Print_init ("");
var strbodystyle = "<link type= ' text/css ' rel= ' stylesheet ' href= '"/content/themes/default/style.css ';
var strbodystyle = "<style><!--table {border:1;background-color: #CBCBCC} td {Border:1;}";
Strbodystyle + = "th {background-color: #F1F1F3;p adding-left:5px;border:1}--></style>";
var strformhtml = Strbodystyle + "<body>" + HTML + "</body>";
Lodop. Add_print_htm (710, 900, strformhtml);
Lodop. PREVIEW ();
}

The resulting two-dimensional code print effect is shown below.

Finally completes this about the barcode, the two-dimensional code dynamic generation, as well as the graphic printing related operation. The entire module's interface is shown below.

On the barcode, two-dimensional code processing, we introduce the barcode component Jsbarcode and two-dimensional code components Qrcodejs is very good open source JS component, meet most of our requirements, and easy to use, concise, hope that these content can give your project inspiration and usefulness.

The above is a small set for you to introduce the Metronic framework based on Bootstrap to achieve barcode and two-dimensional code generation and printing processing operations, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!