The Bootstrap Metronic framework is used to generate and print bar codes and QR codes. bootstrapmetronic

The Bootstrap Metronic framework is used to generate and print bar codes and QR codes. bootstrapmetronic

In many projects, generating and printing bar codes and QR codes is also a common operation. In Web projects, we can use JS to generate many bar codes and QR codes. This article introduces two widely used JS components to process bar code and QR code generation, and introduces how to use the CLODOP component to print the content.

Generate a barcode using the JsBarcode component and generate a QR code using the component qrcodejs.

1. Bar Code Generation

Bar code is generally used in some product tags to facilitate the quick and accurate entry of information using bar code guns.
The following is a bar code.

 

Here, the code generation uses the JsBarcode component for processing. It supports many bar code formats, as shown below.

 

Its simple code example is as follows.

// HTML code <svg id = "barcode"> </svg> <! -- Or --> <canvas id = "canvas"> </canvas> <! -- Or -->  // JS Code JsBarcode ("# barcode", "Hi! "); // Or with jQuery $ (" # barcode "). JsBarcode (" Hi! ");

The format of the generated image is as follows.

 

The JsBarcode component supports setting 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"}) // Will affect all barcodes. EAN13 ("1234567890128", {fontSize: 18, textMargin: 0 }). blank (20) // Create space between the barcodes. EAN5 ("12345", {height: 85, textPosition: "top", fontSize: 16, marginTop: 15 }). render (); through the case code introduction of this component, we can learn about generating regular QR codes. . For example, we added the following HTML code on the interface. <Div class = "row" id = "barDiv1"> <div class = "col-md-4 col-sm-4 col-xs-4"> bar code (770 145 896 701 ): <br/>  </div> <div class = "col-md-4 col-sm-4 col-xs-4"> bar code (770 145 896 ): <br/>  </div> <div class = "col-md-4 col-sm-4 col-xs-4"> bar code (770 145 896 ): <br/>  </div>

Then, the QR code is generated using the JS Code.

// Use JsBarcode to generate a barcode for (var I = 1; I <10; I ++) {var barcodeValue = "77014589670" + I; // prefix + value JsBarcode ("# barcode" + I, barcodeValue, {format: "CODE128", displayValue: true, fontSize: 24, lineColor: "# 0cc "});}

Finally, we can see the specific generation effect as follows.

 

From this we can see that using JavaScript to generate bar codes is very convenient and concise, and the speed of colleagues is also very good.

2. QR code generation

Two-dimensional code can be generated by using the component qrcodejs. The two-dimensional code can also be generated using the component jquery-qrcode, which is relatively simple, but when printing the two-dimensional code document, jquery-qrcode does not display a QR code image, while component qrcodejs works normally. Therefore, we recommend that you use component qrcodejs.

This qrcodejs component is also easy to use. The basic usage code is as follows.

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

The javascript code is as follows.

<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 how to use this component, we can add an actual code in the project for testing, as shown below.

<Table border = '0' width = '000000'> <tr> <td> device QR code (100% ): <br/> <div id = "imgDevice9001"> </div> </td> <td> device QR code (9002 ): <br/> <div id = "imgDevice9002"> </div> </td> <td> device QR code (9003 ): <br/> <div id = "imgDevice9003"> </div> </td> </tr> <tr style = "height: 20px "> <td colspan =" 3 "> </td> </tr> ...... </table>

For details, we can dynamically generate related QR codes using JS.

// Device picture QR code for (var I = 9001; I <9010; I ++) {var url = "http://www.iqidi.com/H5/device? Devicecode = "+ I; // use jquery. qrcode // $ ("# imgDevice" + I ). qrcode ({width: 100, height: 100, text: url}); // $ ("# imgDevice" + I ).css ("height", "100px "); // use qrcodejs var qrcode = new QRCode (document. getElementById ("imgDevice" + I), {text: url, width: 128, height: 128, colorDark: "#000000", colorLight: "# ffffff", correctLevel: QRCode. correctLevel. H });}

The QR code generated on the page is as follows.

 

3. Print the barcode and QR code

This section describes how to generate two-dimensional codes and bar codes. For how to print them, you can use the clodop I have introduced to print them, for details, refer to the following casual web development framework based on MVC + EasyUI: Use the cloud printing control C-Lodop to print pages or set up customs declaration waybills.

The printing we introduced here is also based on this control.

Of course, if printing, the PrintThis component can also be used for processing (For details, refer to the following summary of the BootStrap Metronic Development Framework experience [9] how to print, preview, and save Web page content ), however, the overall effect is not as good as that of CLODOP.

Print the JS Code as follows. You can use one of the following two functions for processing.

// Output function PrintBarcodeWithTable () {LODOP = getLodop (); LODOP. PRINT_INIT ("bar code _ Formatted output"); var strHTML = "<table border = '0' width = '000000'> "; 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 (88,200,700,900, strHTML); LODOP. SET_SHOW_MODE ("PREVIEW_IN_BROWSE", 1); LODOP. PREVIEW ();} // use the paging output function PrintBarcodeWithPaging () {LODOP = getLodop (); LODOP. PRINT_INIT ("barcode _ paging output"); LODOP. ADD_PRINT_HTM (100,100,600,800, $ ("# barDiv1" ).html (); LODOP. newPage (); LODOP. ADD_PRINT_HTM (100,100,600,800, $ ("# barDiv2" ).html (); LODOP. newPage (); LODOP. ADD_PRINT_HTM (100,100,600,800, $ ("# barDiv3" ).html (); LODOP. newPage (); LODOP. SET_SHOW_MODE ("PREVIEW_IN_BROWSE", 1); LODOP. PREVIEW ();}

The bar code is printed as follows.

 

The JS Code for printing the QR code is as follows.

// Print the QR 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; padding-left: 5px; border: 1} --> </style> "; var strFormHtml = strBodyStyle +" <body> "+ html +" </body> "; LODOP. ADD_PRINT_HTM (20, 40,710,900, strFormHtml); LODOP. PREVIEW ();}

The QR code is printed as follows.

 

Finally, we completed the dynamic generation of bar code, QR code, and graphic printing operations. The interface of the entire module is as follows.

 

For the processing of bar code and QR code, the bar code component JsBarcode and the QR code component qrcodejs introduced here is a very good open-source JS component that meets most of our requirements and is easy to use and concise, we hope this content will inspire and be useful to your project.

The above section describes how to generate and print codes and QR codes based on the Bootstrap Metronic framework. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!