How to Convert PDF to JSON in jQuery for PDF to JSON API in JavaScript using Web API

The coding tutorials are designed to help you test the features without the need to write your own code. Web API was made to help with PDF to JSON API in JavaScript. Web API is the Web API with a set of tools for document 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 PDFs.

This rich sample source code in JavaScript for Web API includes the number of functions and options you should do calling the API to implement PDF to JSON API. Follow the instruction and copy-paste code for JavaScript into your project’s code editor. Writing JavaScript applications typically includes multiple stages of software development so even if the functionality works please test it with your data and the production environment. Web API – free trial version is on available our website. Also, there are other code samples to help you with your JavaScript application included in the trial version.

On-demand (REST Web API) version:
 Web API (on-demand version)

On-premise offline SDK for Windows:
 60 Day Free Trial (on-premise)

Now, before going to explore the program itself, let’s review the input document and GIF demo of the program.

  1. Input PDF
  2. Output Demo
  3. Source Code
  4. Source Code Analysis

Input PDF

PDF to JSON Input Document

Output Demo

PDF to JSON Output Demo

Source Code

Let’s examine the following source code first and then we’ll analyze it.

$(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 var apiKey = $("#apiKey").val().trim(); //Get your API key at var formData = $("#form input[type=file]")[0].files[0]; // file to upload var toType = $("#convertType").val(); // output type var isInline = $("#outputType").val() == "inline"; // if we need output as inline content or link to output file $("#status").html('Requesting presigned url for upload... &nbsp;&nbsp;&nbsp; <img src="ajax-loader.gif" />'); $.ajax({ url: '', 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 var accessUrl = result['url']; // reading output url that will indicate uploaded file $("#status").html('Uploading... &nbsp;&nbsp;&nbsp; <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... &nbsp;&nbsp;&nbsp; <img src="ajax-loader.gif" />'); $.ajax({ url: ''+toType+'?url='+ presignedUrl + '&encrypt=true&inline=' + isInline, type: 'POST', headers: {'x-api-key': apiKey}, success: function (result) { $("#status").text('done converting.'); // console.log(JSON.stringify(result)); $("#resultBlock").show(); if (isInline) { $("#inlineOutput").text(result['body']); } else { $("#result").attr("href", result['url']).html(result['url']); } } }); }, error: function () { $("#status").text('error'); } }); } } }); });


Source Code Analysis

Here, we’re basically uploading the source file to the server first. Then, we’re using the the uploaded file URL to call the endpoint for JSON conversion.

For the authentication of request, we have to pass the API key in the Request header. Please refer to the following code snippet as an example. You will get the API key by signing up at

        url: '',
        type: 'GET',
        headers: {'x-api-key': apiKey}, // passing our api key
        success: function (result) {   

Below is the sequence where the API calls are done.

  1. Getting the pre-signed URL using api endpoint ‘/v1/file/upload/get-presigned-url’.
  2. Once we have a pre-signed URL, we upload our file there using the AJAX POST request.
  3. After the file is uploaded, we are using the endpoint ‘/v1/pdf/convert/to/json’ to perform the PDF to JSON conversion.

Quite fun, isn’t it? Please execute this program on your machine and play with it for a better understanding.

Use this GitHub link to get all files used in this program. Thank you!




Get 60 Day Free Trial

See also:


Get Your API Key

See also: