Convert PDF To XLSX in JQuery - Async API - JavaScript
PDF To XLSX sample in JavaScript demonstrating ‘Convert PDF To XLSX in JQuery - Async API’
converter.js
var apiKey, formData, toType, isInline;
$(document).ready(function () {
$("#resultBlock").hide();
$("#errorBlock").hide();
$("#result").attr("href", '').html('');
});
$(document).on("click", "#submit", function () {
$("#resultBlock").hide();
$("#errorBlock").hide();
$("#inlineOutput").text(''); // inline output div
$("#status").text(''); // status div
apiKey = $("#apiKey").val().trim(); //Get your API key at https://app.pdf.co
formData = $("#form input[type=file]")[0].files[0]; // file to upload
toType = $("#convertType").val(); // output type
isInline = $("#outputType").val() == "inline"; // if we need output as inline content or link to output file
$("#status").html('Requesting presigned url for upload... <img src="ajax-loader.gif" />');
$.ajax({
url: 'https://api.pdf.co/v1/file/upload/get-presigned-url?name=test.pdf&contenttype=application/pdf&encrypt=true',
type: 'GET',
headers: { 'x-api-key': apiKey }, // passing our api key
success: function (result) {
if (result['error'] === false) {
var presignedUrl = result['presignedUrl']; // reading provided presigned url to put our content into
$("#status").html('Uploading... <img src="ajax-loader.gif" />');
$.ajax({
url: presignedUrl, // no api key is required to upload file
type: 'PUT',
headers: { 'content-type': 'application/pdf' }, // setting to pdf type as we are uploading pdf file
data: formData,
processData: false,
success: function (result) {
$("#status").html('Processing... <img src="ajax-loader.gif" />');
$.ajax({
url: 'https://api.pdf.co/v1/pdf/convert/to/' + toType + '?url=' + presignedUrl + '&encrypt=true&inline=' + isInline + '&async=True',
type: 'POST',
headers: { 'x-api-key': apiKey },
success: function (result) {
if (result.error) {
$("#status").text('Error uploading file.');
}
else {
checkIfJobIsCompleted(result.jobId, result.url);
}
}
});
},
error: function () {
$("#status").text('error');
}
});
}
}
});
});
function checkIfJobIsCompleted(jobId, resultFileUrl) {
$.ajax({
url: 'https://api.pdf.co/v1/job/check?jobid=' + jobId,
type: 'GET',
headers: { 'x-api-key': apiKey }, // passing our api key
success: function (jobResult) {
$("#status").html(jobResult.status + ' <img src="ajax-loader.gif" />');
if (jobResult.status == "working") {
// Check again after 3 seconds
setTimeout(function(){ checkIfJobIsCompleted(jobId, resultFileUrl) }, 3000)
}
else if (jobResult.status == "success") {
$("#status").text('Done converting.');
$("#resultBlock").show();
if (isInline && toType != "xls" && toType != "xlsx") {
$.ajax({
url: resultFileUrl,
dataType: 'text',
success: function (respText) {
$("#inlineOutput").text(respText);
}
});
}
else {
$("#result").attr("href", resultFileUrl).html(resultFileUrl);
}
}
}
});
}
sample.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cloud API JQuery sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="converter.js" type="text/javascript" encoding="UTF-8"></script>
</head>
<body>
<form id="form" enctype="multipart/form-data">
<p>
<label>Copy-paste your API Key for ByteScout Cloud API here</label>
<input type="text" id="apiKey" placeholder="your cloud API Key" value=""/>
<a href="https://apidocs.pdf.co" target="_blank">no api key yet? sign up here</a>
</p>
<p>
<label>Input PDF File</label>
<input type="file" name="file" id="inputFile" />
</p>
<p>
<label>Convert To</label>
<select id="convertType">
<option value="text"> TXT </option>
<option value="csv"> CSV </option>
<option value="json"> JSON </option>
<option value="xml"> XML </option>
<option value="xls"> XLS </option>
<option selected="selected" value="xlsx"> XLSX </option>
<option value="html"> HTML </option>
</select>
</p>
<p>
<label>Output As</label>
<select id="outputType">
<option value="link"> URL to output file </option>
<option value="inline"> inline content</option>
</select>
</p>
<button type="button" id="submit">Convert</button> <span id="status"></span>
</form>
<div id="errorBlock">
<h2>Error:</h2>
<h4>Code: <span id="statusCode"></span></h4>
<ul id="errors"></ul>
</div>
<div id="resultBlock">
<h2>Output:</h2>
<a id="result" href="" target="_blank"></a>
<div id="inlineOutput"></div>
</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.