En este artículo, vamos a generar el código de barras para cualquier valor de texto utilizando HTML , CSS y Jquery .
El código de barras es la representación única de los caracteres y números en forma de líneas y espacios. Es ampliamente utilizado en tiendas y muchos lugares. Al día de hoy, has visto el código de barras en la mayoría de los productos que se encuentran agotados en el mercado. Simplemente podemos escanear el código de barras usando el lector de código de barras para obtener la información sobre ese producto. Facilita nuestro trabajo para obtener la información del producto. Además, hay muchos otros usos para el código de barras.
Tipos de código de barras: Hay varios tipos de códigos de barras disponibles para usar. Todos los tipos de códigos de barras tienen diferentes aplicaciones y diferentes especificaciones. Los usuarios pueden utilizar cualquier tipo de código de barras según sus requisitos.
- EAN 8
- EAN 13
- Array de datos (código de barras 2D)
- UPC
- codigo 11
- código 39
- código 93
- código 128
- codabar
- estándar 2 de 5 (industrial)
- intercalado 2 de 5
- MSI
Requisito previo: los usuarios deben descargar las siguientes bibliotecas jquery-barcode.js y jquery-barcode.min.js y deben agregarlas entre la sección <head> como se muestra a continuación.
<script type="text/javascript" src="jquery-barcode.js"></script> <script type="text/javascript" src="jquery-barcode.min.js"></script>
Sintaxis: Aquí, usaremos el método de código de barras() de la biblioteca JQuery barcode.js. Los usuarios pueden seguir la sintaxis del método de código de barras como se indica a continuación.
// Initialize input variable
let inputValue = "1234567865";
// initialize barcode type variable
let barcodeType = "ean8";
// initialize settings for the barcode
var settings = {
output: "canvas", // renderer type
bgColor: '#FFFFFF', //background color
color: '#000000', // barcode color
barWidth: '1.5', // canvas width
barHeight: '70', // canvas height
moduleSize: '5',
posX: '15', // starting x position in canvas
posY: '30', // starting y position in canvas
addQuietZone: '1'
};
$('#id_of_output_div').barcode(inputValue, barcodeType, settings);
Ejemplo: en el siguiente ejemplo, hemos escrito el código HTML, CSS y Jquery para generar el código de barras. Los usuarios pueden crear un solo archivo HTML y agregar el siguiente código para probar el código.
HTML
<html>
<head>
<title>Barcode Generator</title>
<style>
body {
max-width: 100%;
text-align: center;
}
.mainDiv {
background: green;
font-family: Arial;
padding: 25px;
max-height: 73s0px;
width: 300px;
text-align: justify;
display: flex;
flex-direction: column;
margin: 20px auto;
}
.mainDiv .row {
margin-bottom: 20px;
overflow: hidden;
}
label {
margin: 5px;
color: lightgrey;
}
h2 {
margin-bottom: 10px;
color: white
}
.input_box {
padding: 10px;
border: none;
background-color: white;
width: 100%;
margin-top: 5px;
}
.button {
background-color: grey;
padding: 10px 40px;
color: white;
border: none;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript"
src="jquery-barcode.js"></script>
<script type="text/javascript"
src="jquery-barcode.min.js"></script>
</head>
<body>
<h1>Barcode Generator using JQuery</h1>
<div class="mainDiv">
<div class="row">
<label>Type The Text</label>
<br />
<input type="text" id="textValue"
value="92312342432" class="input_box">
</div>
<div class="row">
<!-- Different types of barcode -->
<div>
<h2>Choose Barcode Type:</h2>
<input type="radio" name="barcodeType"
value="ean8" checked="checked">
<label>EAN 8</label>
<br />
<input type="radio" name="barcodeType"
value="ean13">
<label>EAN 13</label>
<br />
<input type="radio" name="barcodeType"
value="datamatrix">
<label>Data Matrix (2D barcode)</label>
<br />
<input type="radio" name="barcodeType"
value="upc">
<label>UPC</label>
<br />
<input type="radio" name="barcodeType"
value="code11">
<label>code 11</label>
<br />
<input type="radio" name="barcodeType"
value="code39">
<label>code 39</label>
<br />
<input type="radio" name="barcodeType"
value="code93">
<label>code 93</label>
<br />
<input type="radio" name="barcodeType"
value="code128">
<label>code 128</label>
<br />
<input type="radio" name="barcodeType"
value="codabar">
<label>codabar</label>
<br />
<input type="radio" name="barcodeType"
value="std25">
<label>standard 2 of 5 (industrial)</label>
<br />
<input type="radio" name="barcodeType"
value="int25">
<label>interleaved 2 of 5</label>
<br />
<input type="radio" name="barcodeType"
value="msi">
<label>MSI</label>
<br />
</div>
<!-- Different renderer types of the barcode -->
<div>
<h2>Choose Barcode Format</h2>
<input type="radio" name="rendererType"
value="css" checked="checked">
<label>CSS</label>
<br />
<input type="radio" name="rendererType"
value="canvas">
<label>Canvas</label>
<br />
<input type="radio" name="rendererType"
value="bmp">
<label>BMP</label>
<br />
<input type="radio" name="rendererType"
value="svg">
<label>SVG</label>
<br />
</div>
</div>
<div class="row">
<input type="button" onclick="generateBarcode();"
value="Generate the barcode" class="button">
</div>
<div class="row">
<div id="barcodeoutput"></div>
<canvas id="canvasOutput" width="200"
height="130"></canvas>
</div>
</div>
<script type="text/javascript">
// Function to generate the barcode
function generateBarcode() {
// Taking input values from the user
// Text value
var inputValue = $("#textValue").val();
// Barcode type
var barcodeType = $("input[name=barcodeType]:checked").val();
// Renederer type
var rendererType = $("input[name=rendererType]:checked").val();
// Settings to generate barcode
var settings = {
output: rendererType,
bgColor: '#FFFFFF',
color: '#000000',
barWidth: '1.5',
barHeight: '70',
moduleSize: '5',
posX: '15',
posY: '30',
addQuietZone: '1'
};
if (rendererType != 'canvas') {
// If renderer type is not canvas, show barcodeoutput div and
// add output from barcode() function to that div
$("#canvasOutput").hide();
$("#barcodeoutput").html("").show();
$("#barcodeoutput").barcode(inputValue,
barcodeType,
settings);
} else {
// If renderer type is canvas, create new canvas by
// clearing previous one, and add the output generated
// from barcode() function to new canvas
createCanvas();
$("#barcodeoutput").hide();
$("#canvasOutput").show();
$("#canvasOutput").barcode(inputValue,
barcodeType,
settings);
}
}
// Function to clear canvas.
function createCanvas() {
// Get canvas element from HTML
var canvas = $('#canvasOutput').get(0);
// Add 2d context to canvas
var ctx = canvas.getContext('2d');
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeRect(0, 0, canvas.width, canvas.height);
}
</script>
</body>
</html>
Salida: en la salida, los usuarios pueden ver cómo podemos generar varios tipos de códigos de barras y cómo podemos usar los distintos tipos de renderizadores.
Publicación traducida automáticamente
Artículo escrito por shubhamvora05 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA