PDF.co Web API – PDF To HTML API – JavaScript – Convert PDF To HTML in JQuery

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 for PDF to HTML in JavaScript 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 the 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, the encrypted output is preferred, etc. Here, we’re demonstrating very basic use-case, we can further modify the 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:

• Explore Documentation
• Explore Source Code Samples
• Watch Video Course

ON-DEMAND REST WEB API

Get Your API Key

See also:

• Web API Docs
• Learn About Security
• Explore Source Code Samples