Publicado em por Paulo Künzel

Crie código de barras em javascript com JsBarcode

[download id=”265″]

O JSBarcode é uma biblioteca JavaScript que permite montar em segundos um gerador de código de barras que é versátil e bonito. O código fonte é leve (menos de 50KB), podendo ser utilizado com o mínimo de impacto na aplicação web. Além disso ele permite a customização de diversas propriedades, tais como dimensões, margem e tipo de código de barras.

Exemplo Básico

A implementação dele é simples, basta baixar o código fonte ou fazer o link direto com o site da CDN, criar uma TAG <SVG>, chamar a função JsBarcode(elemento, valor) e pronto. Veja o Exemplo abaixo:

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
        <script>
            function GerarCódigoDeBarras(elementoInput){
                /*A função JsBarcode não aceita string vazia*/
                if(!elementoInput.value){
                    elementoInput.value = 0;
                }
                JsBarcode('#codBarras', elementoInput.value);
            }
        </script>
    </head>
    <body>
        <div>
            <label>Digite um valor</label>
            <input type="text" onblur="GerarCódigoDeBarras(this)"/>
        </div>
        <svg id="codBarras"></svg>
    </body>    
</html>

[download id=”268″]

Como você pode ver o código é simples e a chamada também. Caso seu item não tenha Id do svg, é possível seleciona-lo também pela classe, pelo nome da tag ou pelo elemento, mas lembrando que mais itens poderão ser alterados com essa seleção.

Exemplo com opções

Conforme já mencionado anteriormente, é possível editar as configurações do código de barras, para isso basta passarmos um parâmetro adicional na hora de chamar a função JsBarcode. Veja o exemplo:

<html>
<head>
    <script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
    <script>
        function GerarCódigoDeBarras(elementoInput) {
            let configuracao = {
                format: "pharmacode",
                lineColor: "#0aa",
                width: 4,
                height: 40,
                displayValue: false,
                valid: function (valido) {
                    if (valido) {
                        document.getElementById("mensagem").innerHTML = "";
                    } else {
                        document.getElementById("mensagem").innerHTML = "Valor invalido";
            
                    }
                }
            };
            JsBarcode('#codBarras', elementoInput.value, configuracao);
        }
    </script>
</head>
<body>
    <div>
        <label>Digite um valor</label>
        <input type="text" onblur="GerarCódigoDeBarras(this)" />
    </div>
    <svg id="codBarras"></svg>
    <p id="mensagem"></p>
</body>
</html>

[download id=”271″]

Segue abaixo as opções que podem ser configuradas com seus respectivos tipos e valores. Para mais detalhes, acesse o link deles noGithub que além da definição completa de cada um, também oferece exemplos.

Opção Valor Default Tipo
format “auto” (CODE128) String
width 2 Number
height 100 Number
displayValue true Boolean
text undefined String
fontOptions “” String
font “monospace” String
textAlign “center” String
textPosition “bottom” String
textMargin 2 Number
fontSize 20 Number
background “#ffffff” String (CSS color)
lineColor “#000000” String (CSS color)
margin 10 Number
marginTop undefined Number
marginBottom undefined Number
marginLeft undefined Number
marginRight undefined Number
flat false Boolean
valid function(valid){} Function

Exemplo com as opções definidas no HTML

O último exemplo seta os valores das opções dentro da própria tag HTML, permitindo que os atributos sejam definidos de forma explicita nas tags e fornecendo uma forma alternativa de carregar os códigos de barra.

<html>
<head>
    <script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
    <script>
        window.onload = function () {
            JsBarcode(".barcode").init();
        }
    </script>
</head>
<body>
    <svg class="barcode"  
            jsbarcode-format="upc" 
            jsbarcode-value="123456789012" 
            jsbarcode-textmargin="0" 
            jsbarcode-fontoptions="bold">
    </svg>
</body>
</html>

[download id=”274″]

Conclusão

Essa foi uma abordagem prática no uso do JsBarcode que mostra como é fácil utilizar a biblioteca. Apesar de ser uma ferramenta útil, foi observado também que o programador precisa ter conhecimento das validações de cada tipo de código pois em alguns casos a função JsBarcode simplesmente irá jogar uma exceção ou não renderizará, isso precisará ser tratado de acordo com cada caso e utilizando a função valid que nas opções. Para mais informações acesse o site fornecido abaixo.

Fonte:

http://lindell.me/JsBarcode/

https://github.com/lindell/JsBarcode

https://codepen.io/lindell/pen/mPvLXx

3 respostas para “Crie código de barras em javascript com JsBarcode”

  1. Show de bola…deixa eu perguntar…tenho o necessidade de gerar isso sem o TEXTO abaixo do codigo..nao achei nos parametros e tentei por exemplo TEXT=none …mas nao deu certo…tem alguma maneira que consiga isso ?

Deixe um comentário