How to PDF to HTML in JavaScript & jQuery using Cloud API (low level) - ByteScout

How to PDF to HTML in JavaScript & jQuery using Cloud API (low level)

  • Home
  • /
  • Articles
  • /
  • How to PDF to HTML in JavaScript & jQuery using Cloud API (low level)

Use the sample source code below to convert PDF to HTML in JavaScript & jQuery using ByteScout Cloud API (low level).

It is also possible to convert HTML to PDF using Cloud API.

Sample.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Cloud API JQuery sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="converter.js" type="text/javascript" encoding="UTF-8"></script>
</head>
<body>
 
    <form id="form" enctype="multipart/form-data">
        <p>
            <label>Copy-paste your API Key for ByteScout Cloud API here</label>
            <input type="text" id="apiKey" placeholder="your cloud API Key" value=""/> 
            <a href="https://secure.bytescout.com/sign_up" target="_blank">no api key yet? sign up here</a>
        </p>
        <p>
            <label>Input PDF File</label>
            <input type="file" name="file" id="inputFile" />
        </p>
        <p>
            <label>Convert To</label>
            <select id="convertType">
                <option value="text"> TXT  </option>
                <option value="csv"> CSV  </option>
                <option value="json"> JSON  </option>                
                <option value="xml"> XML  </option>
                <option value="xls"> XLS  </option>
                <option value="xlsx"> XLSX  </option>
                <option value="html"> HTML  </option>
            </select>
        </p>
        <p>
            <label>Output As</label>
            <select id="outputType">
                <option value="link"> URL to output file  </option>
                <option value="inline"> inline content</option>
            </select>
        </p>        
        <button type="button" id="submit">Convert</button> <span id="status"></span>
    </form>
 
    

    <div id="errorBlock">
        <h2>Error:</h2>
        <h4>Code: <span id="statusCode"></span></h4>
        <ul id="errors"></ul>
    </div>
 
    <div id="resultBlock">
        <h2>Output:</h2>
        <a id="result" href="" target="_blank"></a>
        <div id="inlineOutput"></div>
    </div>
 
</body>
</html>

pdf_to_html.js

//*******************************************************************************************//
//                                                                                           //
// Download Free Evaluation Version From: https://bytescout.com/download/web-installer       //
//                                                                                           //
// Also available as Web API! Free Trial Sign Up: https://secure.bytescout.com/users/sign_up //
//                                                                                           //
// Copyright © 2017-2018 ByteScout Inc. All rights reserved.                                 //
// http://www.bytescout.com                                                                  //
//                                                                                           //
//*******************************************************************************************//


$(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://secure.bytescout.com/cloudapi.html
 
    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").text('requesting presigned url for upload...');

    $.ajax({
        url: 'https://bytescout.io/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").text('uploading...');

                $.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").text('converting...');

                        $.ajax({
                            url: 'https://bytescout.io/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');
                    }
                  });                
        

                }
            }
        });
});
 

Tutorials:

prev
next