How to convert PDF to JSON in jquery for PDF to JSON API in JavaScript using PDF.co Web API

Step By Step Tutorial: how to convert PDF to JSON in jquery for PDF to JSON API in JavaScript

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 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.

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.

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 first uploading source file to PDF.co server. Then, we’re using uploaded file URL to call PDF.co endpoint for JSON conversation.

For authentication of PDF.co request, we have to pass PDF.co API key in request header. Please refer to the following code snippet for 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) {   
...

Following is the sequence in which API calls are done.

  1. Getting 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 ajax POST request.
  3. After the file is uploaded, we are using the endpoint ‘/v1/pdf/convert/to/json’ to perform PDF to JSON conversation.

Quite fun, isn’t it? Please execute this program in your machine and play with it for 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: