En muchos proyectos, la generación e impresión de códigos de barras y códigos QR también es una operación muy común. En proyectos web, podemos usar JS para generar códigos de barras y códigos QR. Este artículo presenta dos componentes JS ampliamente utilizados para manejar la generación y procesamiento de códigos de barras y códigos QR, e introduce cómo usar el componente Clodop para lograr la salida de impresión de contenido.
Genere el código de barras utilizando el componente JSBARCode y genere el código QR usando el componente QRCodeJS.
1. Generación de códigos de barras
La función de los códigos de barras generalmente se encuentra en algunas etiquetas de productos, lo que facilita el uso de pistolas de códigos de barras para ingresar información rápida y precisa.
El siguiente es un código de barras
Aquí, la generación de códigos de barras se procesa utilizando el componente JSBARCode, que admite formatos de código de barras en muchos formatos, como se muestra a continuación.
Su ejemplo de código simple se muestra a continuación.
// código html <svg id = "Barcode"> </svg> <!-o-> <Canvas id = "Canvas"> </Canvas> <!-o-> <img id = "Barcode" // JS Code JSBarCode ("#Code", "Hi!"); // o con con con jQuery $ ("#código de barras"). jsbarcode ("¡Hola!");El formato de imagen generado se muestra a continuación.
El componente JSBARCode admite la configuración de múltiples parámetros de opción, como se muestra en el siguiente código
JSBARCODE ("#Barcode", "1234", {format: "Pharmacode", Linecolor: "#0aa", Width: 4, Height: 40, DisplayValue: False}); JSBarCode ("#Barcode"). Opciones ({Font: "OCR-B"}) // afectará a todos BarCodes.ean13 ("1234567890128", {fontSize: 18, textMargin: 0}). Blank (20) // Cree espacio entre los códigos de barras. A través de la introducción del código de casos de este componente, podemos entender cómo usar la generación de códigos QR regulares. Por ejemplo, agregamos el siguiente código HTML a la interfaz. <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> <iv> Barcode (770 145 85 896: /> <img id = "Barcode3" /> </div> </div>Luego, la generación de código QR se realiza a través del código JS.
// use JSBARCode para generar código de barras para (var i = 1; i <10; i ++) {var BarCodeValue = "77014589670" + i; // prefix + numérico JSBarCode ("#Barcode" + I, BarCodeValue, {Format: "Code128", DisplayValue: True, FontSize, YAdSize, endon 24, Linecolor: "#0CC"});}Finalmente, podemos ver el efecto de generación específico de la siguiente manera.
Desde aquí podemos ver que usar JS para lograr la generación de códigos de barras es muy conveniente y conciso, y los colegas también son muy rápidos.
2. Generación de código QR
La implementación del código QR se puede generar utilizando el componente QRCodeJS. El código QR también se puede generar mediante componente jQuery-Qrcode, que es relativamente conciso. Sin embargo, al imprimir el documento del código QR, jQuery-QrCode no muestra la imagen del código QR, mientras que el componente QRCodeJS funciona normalmente, por lo que se recomienda usar el componente QRCodeJS.
El uso de este componente QRCodeJS también es muy simple, y el código de uso básico es el siguiente.
<div id = "qrcode"> </div> <script type = "text/javaScript"> nuevo qrcode (document.getElementById ("qrcode"), "http://jindo.dev.naver.com/collie"); </script>El código JS más complicado se muestra a continuación.
<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", correcto: qrcode.correctlevel.h}); </script>Al comprender el uso de este componente, podemos agregar un código real al proyecto para las pruebas, como se muestra a continuación.
<TABLE BORDER = '0' Width = '100%'> <tr> <TD> Código QR de dispositivo (9001): <Br/> <div id = "IMGDEVICE9001"> </div> </td> <td> el código QR (9002): <BR/> <Div ID = "IMGDEVICE9002"> </iv> </div> </TD> <TD> Dispositivo (9003) (9003). /> <div id = "imgDevice9003"> </div> </td> </tr> <tr style = "altura: 20px"> <td colspan = "3"> </td> </tr> ...... </table>
Específicamente, podemos usar JS para generar dinámicamente códigos QR relevantes.
// El código QR de imagen del dispositivo para (var i = 9001; i <9010; i ++) {var url = "http://www.iqidi.com/h5/device?deviceCode=" + i; // El método de usar jQuery.qrcode // $ ("#imgdevice" + i) .qrcode ({width: 100, 100, 100, 100. }); // $ ("#imgdevice" + i) .css ("altura", "100px"); // El método de usar qrcodeJs var qrcode = new qrcode (document.getElementById ("imgDevice" + i), {texto: url, ancho: 128, altura: 128, colordark: "#000000", ", Colorlight,",, Colorlight: "#ffffff", correcto: qrcode.correctlevel.h});}El código QR generado en la interfaz final se muestra a continuación.
3. Impresión y procesamiento de códigos de barras y códigos QR
Introducir la generación de códigos y códigos de barras QR. Para su impresión, puede usar la climas que introduje para la impresión. Si necesita saber, consulte el ensayo basado en el marco de desarrollo web MVC+EasyUI. El uso de controles de impresión en la nube C-Lodop para imprimir páginas o establecer la declaración de aduanas y la información de la hoja de ruta.
La impresión que presentamos aquí también se basa en el proceso de impresión de este control.
Por supuesto, si imprime, también puede usar el componente PrintThis para el procesamiento (para más detalles, consulte el resumen de la experiencia del marco de desarrollo metrónico de Bootstrap basado en [9] para realizar la vista previa de impresión y el ahorro del contenido de la página web), pero el efecto general no es tan bueno como el efecto de impresión de Clodop anterior.
Imprimir el código JS es el siguiente, y se puede procesar una de las dos funciones siguientes.
// Formato de salida Función 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 (); LOOP.Add_Print_HTM (100, 100, 600, 800, 800, 800, 800, LODOP.NewPage (); LOOP.Add_Print_htm (100, 100, 600, 800, 800, 800, 800, $ ("#BARDIV3"). HTML ()); LODOP.NEWPAGE (); LODOP.SET_SHOW_MODE ("Preview_in_browse", 1); Lodop.Preview ();}El efecto de impresión del código de barras es el siguiente.
El código JS que imprime el código QR se muestra a continuación.
// Imprime la función de código QR printqrcode2 () {CreatePrintData ($ ("#qrcode"). Html ()); lodop.set_show_mode ("preview_in_browse", 1); lodop.preview ();} // Impresión de datos de la construcción CreatePrintData (HTML) {LODOP = getLodop (); lodop.print_init (""); // var strbyStyle = "<link type = 'text/css' rel = 'stylesheet' href = '/content/themes/default/style.css'/>"; var strbodyStyy = "<Syle> <!-table {border: 1; #cbcbccc} td {border: 1; } "; strbodystyle + =" th {background-color:#f1f1f3; padding-left: 5px; border: 1}-> </style> "; var strformhtml = strbystyle +" <body> " + html +" </body> "; lodop.add_print_htm (20, 40, 710, 900, 900,, 900,, 900,, strformhtml); lodop.preview ();}El resultado del código QR se imprime de la siguiente manera.
Finalmente, completamos la generación dinámica de códigos de barras, códigos QR y operaciones relacionadas con la impresión gráfica. La interfaz de todo el módulo se muestra a continuación.
Con respecto al procesamiento de códigos de barras y códigos QR, los componentes de código de barras JSBARCODE y el componente de código QR QRCodeJs que presentamos aquí son muy buenos componentes JS de código abierto, lo que cumple con la mayoría de nuestros requisitos y es fácil de usar y conciso. Espero que estos contenidos puedan proporcionar inspiración y utilidad a su proyecto.
Lo anterior es el marco metrónico basado en Bootstrap para implementar la generación e impresión de códigos de barras y códigos QR. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!