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

Tutorial: how to convert PDF to HTML in jquery for PDF to HTML API in JavaScript

Sample source codes below will show you how to cope with a difficult task, for example, PDF to HTML API in JavaScript. PDF.co Web API was made to help with PDF to HTML API in JavaScript. PDF.co Web API is the flexible Web API that includes a full set of functions from e-signature requests to data extraction, OCR, image recognition, pdf splitting, and PDF splitting. Can also generate barcodes and read barcodes from images, scans, 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 HTML API. Sample code in JavaScript is all you need. Copy-paste it to your code editor, then add a reference to PDF.co Web API and you are ready to try it! Writing a JavaScript application 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 available on 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)

Let’s review source code and it’s output. Then we’ll analyze code briefly.

Source Code:

converter.js

      
$(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'); } }); } } }); });

Output:

Now that we’ve observed the program source code and it’s output, Lets’ review the code a bit.

The HTML file is responsible for displaying all fields. The JavaScript code we have in Converter.js is primarily responsible for binding form submit the event, integrating with PDF.co for converting PDF to HTML, and then displaying the resulting output to page.

The form submit handler function initially gathers all data necessary to invoke PDF.co APIs. First, we’re calling get-presigned-url api endpoint and uploading input PDF to pre-signed URL returned by it. Once input PDF is submitted successfully, we’re proceeding with PDF to HTML conversion.

The PDF.co endpoint v1/pdf/convert/to/html is used for this purpose. As a input we’re passing the URL of the input PDF along with other information such as inline output is preferred, encrypted output is preferred, etc. Here, we’re demonstrating very basic use-case, we can further modify request/response as per our needs. For more information regarding this endpoint, please refer to documentation at here. Once execution is completed, we’re displaying response HTML URL to page.

It’s how easy to convert PDF to HTML with PDF.co APIs. Please try this program on your machine for more information. Thanks for reading!

VIDEO

ON-PREMISE OFFLINE SDK

Get 60 Day Free Trial

See also:

ON-DEMAND REST WEB API

Get Your API Key

See also:

Related Samples: