Em muitos projetos, a geração e a impressão de códigos de barras e códigos QR também são uma operação muito comum. Em projetos da Web, podemos usar JS para gerar códigos de barras e códigos QR. Este artigo apresenta dois componentes JS amplamente utilizados para lidar com a geração e o processamento de códigos de barras e códigos QR e introduz como usar o componente clodop para obter a saída impressa do conteúdo.
Gere um código de barras usando o componente jsBarCode e gerar código QR usando o componente QRCodeJS.
1. Geração de códigos de barras
A função dos códigos de barras geralmente está em alguns rótulos de produtos, o que facilita o uso de armas de código de barras para inserir informações com rapidez e precisão.
A seguir é um código de barras
Aqui, a geração de códigos de barras é processada usando o componente JSBarCode, que suporta formatos de código de barras em muitos formatos, como mostrado abaixo.
Seu exemplo de código simples é mostrado abaixo.
// html code <svg id = "barcode"> </svg> <!-ou-> <canvas id = "canvas"> </canvas> <!-ou-> <img id = "barcode" // js code jsBarc ("#barcode", "hi!"); // ou com jqery (".O formato de imagem gerado é mostrado abaixo.
O componente JSBarCode suporta a configuração de vários parâmetros de opções, como mostrado no código a seguir
JsBarcode ("#barcode", "1234", {format: "farmacode", linecolor: "#0aa", largura: 4, altura: 40, displayValue: false}); jsBarcode ("#barcode"). {fontsize: 18, textMargin: 0}). Blank (20) // Crie espaço entre os barcos.ean5 ("12345", {Height: 85, textPosition: "top", fontsize: 16, margintop: 15}). render (); Através da introdução do código do caso deste componente, podemos entender como usar a geração de códigos QR regulares. Por exemplo, adicionamos o seguinte código HTML à interface. <div Id = "Bardiv1"> <div> Code (770 145 896 701): <r /> <img id = "barcode1" /> </div> <div> código de barras (770 145 896 702): <r /> <img id = "Barcode2" /> < /> < /> < /Div. /> <img id = "barcode3" /> </div> </div>Em seguida, a geração de código QR é realizada através do código JS.
// Use jsBarcode para gerar código de barras para (var i = 1; i <10; i ++) {var barcodEvalue = "77014589670" + i; // prefixo + fumerical jsBarcode ("#barcode" + i, barcodEvalue: {formato: "CodeCode" "#"#" + i, barcodEvalue: {formato:" CodeCode ""# "#0cc"});}Finalmente, podemos ver o efeito de geração específico da seguinte maneira.
A partir daqui, podemos ver que o uso de JS para obter a geração de códigos de barras é muito conveniente e conciso, e os colegas também são muito rápidos.
2. Geração de código QR
A implementação do código QR pode ser gerada usando o componente QRCodeJS. O código QR também pode ser gerado pelo componente jQuery-qrcode, que é relativamente conciso. No entanto, ao imprimir o documento do código QR, o JQuery-QRCode não exibe a imagem do código QR, enquanto o componente QRCodeJS funciona normalmente, por isso é recomendável usar o componente QRCodeJS.
O uso desse componente QRCodeJS também é muito simples e o código de uso básico é o seguinte.
<div id = "qrcode"> </div> <script type = "text/javascript"> new Qrcode (document.getElementById ("qrcode"), "http://jindo.dev.naver.com/collie"); </script>O código JS mais complicado é mostrado abaixo.
<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", correto: qrcode.correctlevel.h}); </script>Ao entender o uso deste componente, podemos adicionar um código real ao projeto para teste, como mostrado abaixo.
<tabela borda = '0' width = '100%'> <tr> <td> Código QR do dispositivo (9001): <r/> <div id = "imgDevice9001"> </div> </td> <td> Código QR (9002): <r/> <divD = "imgdvice9002"> /> <div id = "imgDevice9003"> </div> </td> </tr> <tr style = "altura: 20px"> <td colspan = "3"> </td> </tr> ...... </ table>
Especificamente, podemos usar o JS para gerar dinamicamente códigos QR relevantes.
// A imagem do dispositivo Código qr para (var i = 9001; i <9010; i ++) {var url = "http://www.iqidi.com/h5/device?deviceCode=" + i; // o método de usar jQuery.qrcode // ("#iMgDevice" }); // $ ("#imgDevice" + i) .css ("altura", "100px"); // o método de usar qrcodejs var qrcode = new Qrcode (document.getElementById ("imgDevice" + i), text: url,# "#ffffff", correto: qrcode.correctlevel.h});}O código QR gerado na interface final é mostrado abaixo.
3. Impressão e processamento de códigos de barras e códigos QR
Apresente a geração de códigos QR e códigos de barras. Para a impressão deles, você pode usar o clodop que introduzi para impressão. Se você precisar saber, consulte o ensaio com base na estrutura de desenvolvimento da Web MVC+Easyui. Usando controles de impressão em nuvem C-LODOP para imprimir páginas ou definir informações alfandegárias e informações de Waybill.
A impressão que apresentamos aqui também é baseada no processo de impressão desse controle.
Obviamente, se você imprimir, também poderá usar o componente PrintThis para processamento (para obter detalhes, consulte o resumo da experiência da estrutura de desenvolvimento metrônico de Bootstrap com base em [9] para realizar a visualização e a economia de impressão do conteúdo da página da web), mas o efeito geral não é tão bom quanto o efeito de impressão do clodope acima.
Imprimir o código JS é o seguinte e uma das duas funções a seguir pode ser processada.
// FORNECIMENTO FUNÇÃO DE SAÍDA PrintBarCODEWITHTABLE () {lodOp = getLodop (); lodOp.print_init ("barcode_format Output"); var strhtml = "<tabela borda = '0' width = '100%'>"; strhtm = strhtml + "<tr> <td>"; $ ("#bardiv1"). html (); strhtml = strhtml + "</td> </tr>"; strhtml = strhtml + "<tr> <td>"; strhtml = strhtml + $ ("#bardiv2"). htrhn; "</td> </tr>"; strhtml = strhtml + "<tr> <td>"; strhtml = strhtml + $ ("#bardiv3"). html (); strhtml = strhtml + "</td> </tr>"; lodOp.dd_drint_pinT_PrhInt_PrhTinT_PrhTinT_PrhTinT_PrhTinT_PrhTinT_PrhTinT_PROBLET_PROBLET_TRHTIRT_PRHTIRT_PRHTIRT_PRHTILT_TRHTML = STRHTML + "</td> </tr>"; lodOp.ad_tinT_TRHTInT_PRHT_TRHTMIT_TRHTML = 88, 88). strhtml); lodop.set_show_mode ("VIVIEW_IN_BROWSE", 1); lodOp.Preview ();} // Use a função de saída de paginação PrintBarCoDewithPaging () {lodOp = getlodop (); lodOp.print_init ("barting_paging outurting"; $ ("#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 ();}O efeito de impressão do código de barras é o seguinte.
O código JS que imprime o código QR é mostrado abaixo.
// Imprima o código QR Função printqrcode2 () {CreatePrintData ($ ("#qrcode"). Html ()); lodop.set_show_mode ("Visuew_in_browse", 1); lodop.preview ();} // Função de construção de dados CreatePrintData (html); getlodop (); lodop.print_init (""); // var strbodystyle = "<link type = 'text/css' rel = 'stylesheet' href = '/content/temes/default/style.css'/>"; var strbodyle = "<estilo> <!-tabela {borda: 1; 1; } "; strbodyStyle + =" th {Background-Color:#f1f1f3; preenchimento-left: 5px; borda: 1}-> </style> "; var strformHtml = strbodyle +" <body> " + html +" </body> "; lodOp.add_printmm (20 40 anos, 40, 40, 40, 40 anos, 40, 40 anos, (body-body>" </estily> "; strformhtml); lodOp.Preview ();}O resultado do código QR é impresso da seguinte forma.
Finalmente, concluímos a geração dinâmica de códigos de barras, códigos QR e operações relacionadas à impressão gráfica. A interface de todo o módulo é mostrada abaixo.
Em relação ao processamento de códigos de barras e códigos QR, os componentes de código de barras JSBARCODE e o QR Code Component QrcodeJs que introduzimos aqui são componentes JS de código aberto muito bons, que atendem à maioria de nossos requisitos e é fácil de usar e conciso. Espero que esses conteúdos possam fornecer inspiração e utilidade ao seu projeto.
O exposto acima está a estrutura metronic baseada em bootstrap para implementar a geração e a impressão de códigos de barras e códigos QR. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!