boleto.js

Renderizador de código de barras para boletos bancários

Utilização

Inclua o script da biblioteca

<script src="dist/boleto.min.js"></script>

Crie uma instância de Boleto passando o número do boleto e o seletor do elemento onde ele deve ser renderizado.

<div id="boleto"></div>

<script>
  var number = '34195.00008 01233.203189 64221.470004 5 84410000002000';
  new Boleto(number).toSVG('#boleto');
</script>

Alternativamente, você pode retornar a representação HTML da imagem do código de barras:

<script>
  var number = '34195.00008 01233.203189 64221.470004 5 84410000002000';
  var svg = new Boleto(number).toSVG();
  console.log(svg); // Veja o código HTML no console
</script>

O número do boleto pode conter apenas os números ou estar formatado com pontos e espaços. O boleto.js irá filtrar apenas os dígitos e validá-los antes de mostrar o código de barras.

Resultado

O código será renderizado em SVG, com boa nitidez em diversos tamanhos. Por trabalhar com vetores, e não imagens, é uma excelente ferramenta para páginas com layout responsivo.

Métodos adicionais

Além de renderizar o código de barras, o boleto.js também possui alguns métodos que podem facilitar a exibição de dados.

// Numeração da linha digitável
.number()         // 34195000080123320318964221470004584410000002000
.prettyNumber()   // 34195.00008 01233.203189 64221.470004 5 84410000002000

// Numeração do código de barras
.barcode()        // 34195844100000020005000001233203186422147000
.checksum()       // 5

// Informações sobre a cobrança
.amount()         // 120.00
.prettyAmount()   // R$ 120,00
.bank()           // Itaú
.currency()       // { code: 'BRL', symbol: 'R$', decimal: ',' }
.expirationDate() // Sun Nov 15 2020 22:00:00 GMT-0200 (BRST)

.renderSVG() // <svg width="100" height="150" ...></svg>

Licença

MIT © Gustavo Franco