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

The coding tutorials are designed to help you test the features without the need to write your own code. PDF.co Web API was made to help with PDF to JSON API in JavaScript. PDF.co 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 PDF.co 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.

PDF.co 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 https://app.pdf.co/documentation/api 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: '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 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: 'https://api.pdf.co/v1/pdf/convert/to/'+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 PDF.co server first. Then, we’re using the the uploaded file URL to call the PDF.co endpoint for JSON conversion.

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

 $.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) {   
...

Below is the sequence where the API calls are done.

  1. Getting the PDF.co 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!

 

VIDEO

ON-PREMISE OFFLINE SDK

Get 60 Day Free Trial

See also:

ON-DEMAND REST WEB API

Get Your API Key

See also:

Related Pages:

Related Samples: