In many projects, the generation and printing of barcodes and QR codes is also a very common operation. In web projects, we can use JS to generate barcodes and QR codes. This article introduces two widely used JS components to handle the generation and processing of barcodes and QR codes, and introduces how to use the CLODOP component to achieve the print output of content.
Generate barcode using component JsBarcode, and generate QR code using component qrcodejs.
1. Generation of barcodes
The function of barcodes is generally on some product labels, which facilitates the use of barcode guns to quickly and accurately enter information.
The following is a barcode
Here, barcode generation is processed using the JsBarcode component, which supports barcode formats in many formats, as shown below.
Its simple code example is shown below.
//HTML code<svg id="barcode"></svg><!-- or --><canvas id="canvas"></canvas><!-- or --><img id="barcode"//JS code JsBarcode("#barcode", "Hi!");// or with jQuery$("#barcode").JsBarcode("Hi!");The generated image format is shown below.
The JsBarcode component supports 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"}) // 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 understand how to use the generation of regular QR codes. For example, we added the following HTML code to the interface. <div id="barDiv1"><div>Barcode(770 145 896 701): <br /><img id="barcode1" /></div><div>Barcode(770 145 896 702): <br /><img id="barcode2" /></div><div>Barcode(770 145 896 703): <br /><img id="barcode3" /></div></div>Then, the QR code generation is realized through JS code.
//Use JsBarcode to generate barcode for (var i = 1; i < 10; i++) {var barcodeValue = "77014589670" + i;//Prefix + numerical JsBarcode("#barcode" + i, barcodeValue, {format: "CODE128",displayValue: true, fontSize: 24,lineColor: "#0cc"});}Finally, we can see the specific generation effect as follows.
From here we can see that using JS to achieve barcode generation is very convenient and concise, and colleagues are also very fast.
2. Generation of QR code
The QR code implementation can be generated by using component qrcodejs. The QR code can also be generated by component jquery-qrcode, which is relatively concise. However, when printing the QR code document, jquery-qrcode does not display the QR code picture, while component qrcodejs works normally, so it is recommended to use component qrcodejs.
The use of this qrcodejs component is also very simple, and 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 more complicated 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 an actual code to the project for testing, as shown below.
<table border='0' width='100%'><tr><td>Device QR code (9001): <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>
Specifically, we can use JS to dynamically generate relevant QR codes.
//The device image QR code for (var i = 9001; i < 9010; i++) {var url = "http://www.iqidi.com/H5/device?devicecode=" + i;//The method of using jquery.qrcode//$("#imgDevice" + i).qrcode({ width: 100, height: 100, text: url });//$("#imgDevice" + i).css("height", "100px");//The method of using 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 final interface is shown below.
3. Printing and processing of barcodes and QR codes
Introduce the generation of QR codes and barcodes. For their printing, you can use the CLODOP I introduced for printing. If you need to know, please refer to the essay based on MVC+EasyUI web development framework. Using cloud printing controls C-Lodop to print pages or set customs declaration and waybill information.
The printing we introduce here is also based on the printing process of this control.
Of course, if you print, you can also use PrintThis component for processing (for details, please refer to the experience summary of BootStrap Metronic development framework based on [9] to realize the printing preview and saving of web page content), but the overall effect is not as good as the above CLODOP's printing effect.
Printing the JS code is as follows, and one of the following two functions can be processed.
//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(88, 200, 700, 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(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 printing effect of the barcode is as follows.
The JS code that prints the QR code is shown below.
//Print QR code function PrintQrcode2() {CreatePrintData($("#qrcode").html());LODOP.SET_SHOW_MODE("PREVIEW_IN_BROWSE", 1);LODOP.PREVIEW();}//Print data construction 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 result of the QR code is printed as follows.
Finally, we completed the dynamic generation of barcodes, QR codes, and graphic printing related operations. The interface of the entire module is shown below.
Regarding the processing of barcodes and QR codes, the barcode components JsBarcode and QR code component qrcodejs we introduced here are very good open source JS components, which meets most of our requirements and is easy to use and concise. I hope these contents can provide inspiration and usefulness to your project.
The above is the Bootstrap-based Metronic framework to implement the generation and printing of barcodes and QR codes. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!