Link Search Menu Expand Document

Convert PDF To XML in JQuery - JavaScript

PDF To XML sample in JavaScript demonstrating ‘Convert PDF To XML in JQuery’

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

                }
            }
        });
});
 

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://apidocs.pdf.co" 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 selected="selected" 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.co Web API: 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.

Get your PDF.co API key here!

Download Source Code (.zip)

return to the previous page explore PDF To XML endpoint