How to convert spreadsheets (Excel, CSV, TXT, XML, HTML, PDF) in jQuery using Cloud API

  • Home
  • /
  • Articles
  • /
  • How to convert spreadsheets (Excel, CSV, TXT, XML, HTML, PDF) in jQuery using Cloud API

The code samples below allow you to extract and convert spreadsheets between various formats such as TXT, XLS, XLSX, XML, CSV, PDF, HTML in JavaScript & jQuery using ByteScout Cloud API.

You may also check samples of how to work with spreadsheets in pure JavaScript, Javaand PHP 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="csv"> CSV  </option>
                <option value="text"> TXT  </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>

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://secure.bytescout.com/cloudapi.html
 
    var formData = new FormData($("#form")[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');
                    }
                  });                
        

                }
            }
        });
});
 

prev
next