Dans de nombreux projets, la génération et l'impression des codes-barres et des codes QR sont également une opération très courante. Dans les projets Web, nous pouvons utiliser JS pour générer des codes-barres et des codes QR. Cet article introduit deux composants JS largement utilisés pour gérer la génération et le traitement des codes-barres et des codes QR, et présente comment utiliser le composant Clodop pour obtenir la sortie d'impression du contenu.
Générez le code-barres à l'aide du composant jsbarcode et générez du code QR à l'aide du composant QRCodejs.
1. Génération de codes à barres
La fonction des codes à barres est généralement sur certaines étiquettes de produit, ce qui facilite l'utilisation des pistolets de code-barres pour saisir rapidement et avec précision les informations.
Ce qui suit est un code-barres
Ici, la génération de code-barres est traitée à l'aide du composant JSBarcode, qui prend en charge les formats de code-barres dans de nombreux formats, comme indiqué ci-dessous.
Son exemple de code simple est illustré ci-dessous.
// Code html <svg id = "Barcode"> </ svg> <! - ou -> <canvas id = "canvas"> </ canvas> <! - ou -> <img id = "Barcode" // JS code jsbarcode ("# barcode", "hi!"); jQuery $ ("# Barcode"). jsbarcode ("Salut!");Le format d'image généré est illustré ci-dessous.
Le composant JSBarcode prend en charge le réglage de plusieurs paramètres d'option, comme indiqué dans le code suivant
JSBarcode ("# Barcode", "1234", {Format: "Pharmacode", LineColor: "# 0AA", Width: 4, Height: 40, DisplayValue: False}); Jsbarcode ("# Barcode"). Barcodes.EAN13 ("1234567890128", {FonTSize: 18, TextMargin: 0}). Blank (20) // Créer un espace entre les Barcodes.EAN5 ("12345", {Height: 85, TextPosition: "Top", FonTSize: 16, margintop: 15}). Render (); Grâce à l'introduction du code de cas de ce composant, nous pouvons comprendre comment utiliser la génération de codes QR réguliers. Par exemple, nous avons ajouté le code HTML suivant à l'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>Ensuite, la génération de code QR est réalisée via le code JS.
//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"});}Enfin, nous pouvons voir l'effet de génération spécifique comme suit.
De là, nous pouvons voir que l'utilisation de JS pour atteindre la génération de codes à barres est très pratique et concise, et que les collègues sont également très rapides.
2. Génération de code QR
L'implémentation du code QR peut être générée en utilisant le composant QRCODEJS. Le code QR peut également être généré par le composant JQuery-QRCode, qui est relativement concis. Cependant, lors de l'impression du document de code QR, jQuery-QRCode n'affiche pas l'image du code QR, tandis que le composant QRCodeJS fonctionne normalement, il est donc recommandé d'utiliser le composant QRCodeJS.
L'utilisation de ce composant QRCODEJS est également très simple et le code d'utilisation de base est le suivant.
<div id = "qrcode"> </ div> <script type = "text / javascript"> new qrcode (document.getElementByid ("qrcode"), "http://jindo.dev.naver.com/collie"); </ script>Le code JS le plus compliqué est illustré ci-dessous.
<div id = "qrcode"> </ div> <script type = "text / javascript"> var qrcode = new qrcode (document.getElementByid ("qrcode"), {text: "http://jindo.dev.naver.com/collie", coloride: 128, hauteur: 128, Colordark:" # 0000 " "#FFFFFF", correctifvel: qrcode.correctlevel.h}); </script>En comprenant l'utilisation de ce composant, nous pouvons ajouter un code réel au projet pour les tests, comme indiqué ci-dessous.
<Table Border = '0' width = '100%'> <tr> <td> Code QR de périphérique (9001): <br /> <div id = "IMGDevice9001"> </ div> </ td> <td> Code QR (9002): <r /> <v id = "imgdevice9002"> </v> </v> /> <div id = "imgdevice9003"> </ div> </td> </tr> <tr style = "height: 20px"> <td colspan = "3"> </td> </tr> ...... </ table>
Plus précisément, nous pouvons utiliser JS pour générer dynamiquement les codes QR pertinents.
//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"); // la méthode d'utilisation de qrcodejs var qrcode = new qrcode (document.getElementByid ("imgdevice" + i), {text: url, width: 128, height: 128, Colordark: "# 0000", width: 128, hauteur: 128, Colordark: "# 0000", Colorlight: 128 "#ffffff", correct: qrcode.correctlevel.h});}Le code QR généré sur l'interface finale est illustré ci-dessous.
3. Impression et traitement des codes-barres et des codes QR
Présentez la génération de codes QR et de codes à barres. Pour leur impression, vous pouvez utiliser le Clodop que j'ai introduit pour l'impression. Si vous avez besoin de savoir, veuillez vous référer à l'essai basé sur le cadre de développement Web MVC + EasyUI. Utilisation des commandes d'impression cloud C-LODOP pour imprimer des pages ou définir la déclaration de douane et les informations Waybill.
L'impression que nous introduisons ici est également basée sur le processus d'impression de ce contrôle.
Bien sûr, si vous imprimez, vous pouvez également utiliser le composant PrintThis pour le traitement (pour plus de détails, veuillez vous référer au résumé de l'expérience du cadre de développement métronique bootstrap basé sur [9] pour réaliser l'aperçu de l'impression et la sauvegarde du contenu de la page Web), mais l'effet global n'est pas aussi bon que l'effet d'impression de Clodop ci-dessus.
L'impression du code JS est la suivante, et l'une des deux fonctions suivantes peut être traitée.
// Fonction de sortie Fonction 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"). $ ("# bardiv3"). html ()); lodop.newpage (); lodop.set_show_mode ("préview_in_browse", 1); lodop.preview ();}L'effet d'impression du code-barres est le suivant.
Le code JS qui imprime le code QR est illustré ci-dessous.
// imprime la fonction du code qr printqrcode2 () {createPrintData ($ ("# qrcode"). Html ()); lodop.set_show_mode ("préview_in_browse", 1); lodop.preview ();} // imprimer la fonction de construction de données CreatePrintData (html) {lodop = getlodop (); lodop.print_init (""); // var strbodystyle = "<link type = 'text / css' rel = 'stylesheet' href = '/ contenu / themes / default / style.css' />"; var strbodystyle = "<ystyle> <! - Tableau {front: 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, lodop.add_print_htm (20, 40, 710, 900, lodop.add_print_htm (20, 40, 710, 900, strFormHtml); Lodop.Preview ();}Le résultat du code QR est imprimé comme suit.
Enfin, nous avons terminé la génération dynamique de codes-barres, de codes QR et d'opérations liées à l'impression graphique. L'interface de l'ensemble du module est indiquée ci-dessous.
En ce qui concerne le traitement des codes-barres et des codes QR, les composants de code-barres JSBarcode et QR Code Component QRCodejs que nous avons introduits ici sont de très bons composants JS open source, qui répond à la plupart de nos exigences et est facile à utiliser et à utiliser. J'espère que ces contenus pourront inspirer et utiliser votre projet.
Ce qui précède est le cadre métronique basé sur bootstrap pour implémenter la génération et l'impression des codes-barres et des codes QR. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!