Generate Barcode - Async API - JavaScript
Barcode Generator sample in JavaScript demonstrating ‘Generate Barcode - Async API’
generate_barcode.js
var apiKey = "";
function generateBarcode() {
// Hide result blocks
document.getElementById("errorBlock").style.display = "none";
document.getElementById("resultBlock").style.display = "none";
// Get API Key
apiKey = document.getElementById("apiKey").value.trim();
if (apiKey == "") {
alert("API Key should not be empty.");
return false;
}
// Get barcode type
var barcodeType = document.getElementById("barcodeType").value;
// Get barcode value
var inputValue = document.getElementById("inputValue").value.trim();
if (inputValue == null || inputValue == "") {
alert("Barcode Value should not be empty.");
return false;
}
//show loader
showLoader(true);
// Prepare URL
var url = "https://api.pdf.co/v1/barcode/generate?name=barcode.png";
url += "&type=" + barcodeType; // Set barcode type (symbology)
url += "&value=" + inputValue; // Set barcode value
url += "&async=True"; // Set async api
// Prepare request
var httpRequest = new XMLHttpRequest();
httpRequest.open("POST", url, true);
httpRequest.setRequestHeader("x-api-key", apiKey); // set API Key
// Asynchronous response handler
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState == 4) {
// If OK
if (httpRequest.status == 200) {
var result = JSON.parse(httpRequest.responseText);
checkIfJobIsCompleted(result.jobId, result.url);
}
// Else display error
else {
document.getElementById("errorBlock").style.display = "block"; // show hidden errorBlock
document.getElementById("error").innerHTML = "Request failed. Please check you use the correct API key.";
// Hide loader
showLoader(false);
}
}
}
// Send request
httpRequest.send();
return true;
}
function checkIfJobIsCompleted(jobId, resultFileUrl) {
var url = 'https://api.pdf.co/v1/job/check?jobid=' + jobId;
// Prepare request
var httpRequest = new XMLHttpRequest();
httpRequest.open("POST", url, true);
httpRequest.setRequestHeader("x-api-key", apiKey); // set API Key
// Asynchronous response handler
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState == 4) {
// If OK
if (httpRequest.status == 200) {
var jobResult = JSON.parse(httpRequest.responseText);
if (jobResult.status == "working") {
// Check again after 3 seconds
setTimeout(function(){
checkIfJobIsCompleted(jobId, resultFileUrl);
}, 3000);
}
else if (jobResult.status == "working") {
document.getElementById("resultBlock").style.display = "block"; // show hidden resultBlock
document.getElementById("image").setAttribute("src", resultFileUrl); // Set image link to display
// Hide loader
showLoader(false);
}
}
// Else display error
else {
document.getElementById("errorBlock").style.display = "block"; // show hidden errorBlock
document.getElementById("error").innerHTML = "Request failed. Please check you use the correct API key.";
// Hide loader
showLoader(false);
}
}
}
// Send request
httpRequest.send();
}
function showLoader(isDisplay) {
var loader = document.getElementById("loader");
if (isDisplay) {
loader.style.display = "";
}
else {
loader.style.display = "none";
}
}
sample.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Barcode Generator Cloud API Example</title>
<script src="generate_barcode.js" type="text/javascript" encoding="UTF-8"></script>
</head>
<body>
<form name="form1">
<p>
<label>Authentication key (API Key). Get your own by registering at <a href="https://apidocs.pdf.co">https://apidocs.pdf.co</a>.</label>
<br />
<input type="text" id="apiKey" placeholder="API Key" />
</p>
<p>
<label>Barcode Value</label>
<br />
<input type="text" id="inputValue" placeholder="Input Value" />
</p>
<p>
<label>Barcode type</label>
<br />
<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" onclick="return generateBarcode()">Generate</button>
<span id="loader" style="display: none" > <img src="ajax-loader.gif" /> </span>
</form>
<div id="errorBlock" style="display: none">
<h2>Error:</h2>
<div id="error"></div>
</div>
<div id="resultBlock" style="display: none">
<h2>Result:</h2>
<img src="" id="image">
</div>
</body>
</html>
PDF.co Web API: the Web API with a set of tools for documents manipulation, data conversion, data extraction, splitting and merging of documents. Includes image recognition, built-in OCR, barcode generation and barcode decoders to decode bar codes from scans, pictures and pdf.