Important Update
The source code sample below demonstrates how to generate barcodes in JavaScript & jQuery using Cloud API (low level).
Also, you can easily read barcodes in JavaScript & jQuery using ByteScout Cloud Api.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Barcode JQuery sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="generate_barcode.js" type="text/javascript" encoding="UTF-8"></script>
</head>
<body>
<form>
<p>
<label>Copy-paste your API Key for api.pdf.co here</label>
<input type="text" id="apiKey" placeholder="API Key" />
</p>
<p>
<label>InputValue</label>
<input type="text" id="inputValue" placeholder="Input Value" />
</p>
<p>
<label>Barcode type</label>
<select id="barcodeType">
<option value="Aztec"> Aztec </option>
<option value="Bookland"> Bookland </option>
<option value="Codabar"> Codabar </option>
<option value="Code128"> Code 128 </option>
<option value="Code39" selected="selected"> Code 39 </option>
<option value="Code93"> Code 93 </option>
<option value="DataMatrix"> DataMatrix </option>
<option value="DeutschePostIdentcode"> Deutsche Post Identcode </option>
<option value="DeutschePostLeitcode"> Deutsche Post Leitcode </option>
<option value="DutchKix"> Dutch KIX </option>
<option value="EAN128"> EAN-128 </option>
<option value="EAN13"> EAN-13 </option>
<option value="EAN14"> EAN-14 </option>
<option value="EAN2"> EAN-2 </option>
<option value="EAN5"> EAN-5 </option>
<option value="EAN8"> EAN-8 </option>
<option value="GS1_128"> GS1-128 </option>
<option value="GS1_DataBar_Expanded"> GS1 DataBar Expanded </option>
<option value="GS1_DataBar_Expanded_Stacked"> GS1 DataBar Expanded Stacked </option>
<option value="GS1_DataBar_Limited"> GS1 DataBar Limited </option>
<option value="GS1_DataBar_Omnidirectional"> GS1 DataBar Omnidirectional </option>
<option value="GS1_DataBar_Stacked"> GS1 DataBar Stacked </option>
<option value="GS1_DataBar_Stacked_Omnidirectional"> GS1 DataBar Stacked Omnidirectional </option>
<option value="GS1_DataBar_Truncated"> GS1 DataBar Truncated </option>
<option value="GS1_DataMatrix"> GS1-DataMatrix </option>
<option value="GTIN12"> GTIN-12 </option>
<option value="GTIN13"> GTIN-13 </option>
<option value="GTIN14"> GTIN-14 </option>
<option value="GTIN8"> GTIN-8 </option>
<option value="I2of5"> Interleaved 2 of 5 </option>
<option value="IntelligentMail"> Intelligent Mail </option>
<option value="ISBN"> ISBN </option>
<option value="ITF14"> ITF-14 </option>
<option value="JAN13"> JAN-13 </option>
<option value="MacroPDF417"> Macro PDF417 </option>
<option value="MaxiCode"> MaxiCode </option>
<option value="MicroPDF417"> Micro PDF417 </option>
<option value="MSI"> MSI </option>
<option value="Numly"> Numly </option>
<option value="OpticalProduct"> Optical Product </option>
<option value="PDF417"> PDF417 </option>
<option value="PDF417Truncated"> PDF417 Truncated </option>
<option value="Planet"> Planet </option>
<option value="Plessey"> Plessey </option>
<option value="Postnet"> Postnet </option>
<option value="PZN"> PZN </option>
<option value="QRCode"> QR Code </option>
<option value="RoyalMail"> Royal Mail </option>
<option value="SingaporePostalCode"> Singapore Postal Code </option>
<option value="SwissPostParcel"> Swiss Post Parcel </option>
<option value="Telepen"> Telepen </option>
<option value="UPCA"> UPC-A </option>
<option value="UPCE"> UPC-E </option>
<option value="USPSSackLabel"> USPS Sack Label </option>
<option value="USPSTrayLabel"> USPS Tray Label </option>
</select>
</p>
<button type="button" id="submit">Generate</button>
</form>
<div id="errorBlock">
<h2>Error:</h2>
<h4>Code: <span id="statusCode"></span></h4>
<ul id="errors"></ul>
</div>
<div id="resultBlock">
<h2>Result:</h2>
<img src="" id="image">
</div>
</body>
</html>
$(document).ready(function () {
$("#resultBlock").hide();
$("#errorBlock").hide();
});
$(document).on("click", "#submit", function () {
var apiKey = $("#apiKey").val().trim(); //Get your API key by registering at http://www.api.pdf.co/
var url = "https://api.pdf.co/api/v1/barcode/generate?apiKey=" + apiKey;
var value = $("#inputValue").val();
var options = {
"properties": {
"symbology": $("#barcodeType").val(),
"foreColor": "Red",
"margins": {
"top": 0,
"bottom": 0,
"left": 0,
"right": 0
},
"resolutionX": 50,
"resolutionY": 50,
"size": {
"height": 100,
"width": 100
}
},
"input": value,
"inputType": "value",
"outputType": "link"
};
$.ajax({
url: url,
type: "POST",
data: JSON.stringify(options),
contentType: "application/json",
success: function (link) {
$("#resultBlock").show();
$("#image").attr("src", link);
},
error: function (response) {
$("#errorBlock").show();
$("#statusCode").html(response.status);
$("#errors").html("");
$.each(response.responseJSON.Errors, function () {
$("#errors").append($("<li></li>").html(this));
});
}
});
});
IMPORTANT:
Cloud API is deprecated and was replaced with more powerful and secure www.PDF.co Web API
CLICK HERE
TO LEARN MORE
ABOUT NEW
www.PDF.co
w/ Web API
On-Premise API Server
Cloud API Server