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, Java, and PHP using Cloud API.

Sample.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Spreadsheet JQuery sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="spreadsheet.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.IO here</label>
            <input type="text" id="apiKey" placeholder="API Key" />
        </p>
        <p>
            <label>InputFile</label>
            <input type="file" name="file" id="inputFile" />
        </p>
        <p>
            <label>Convert To</label>
            <select id="convertType">
                <option value="CSV"> CSV  </option>
                <option value="HTML"> HTML  </option>
                <option value="TXT"> TXT  </option>
                <option value="XLS"> XLS  </option>
                <option value="XLSX"> XLSX  </option>
                <option value="XML"> XML  </option>
                <option value="PDF"> PDF  </option>
            </select>
        </p>
        <button type="button" id="submit">Convert</button>
    </form>

    <div id="errorBlock">
        <h2>Error:</h2>
        <h4>Code: <span id="statusCode"></span></h4>
        <ul id="errors"></ul>
    </div>

    <div id="resultBlock">
        <h2>Result:</h2>
        <a id="result" href=""></a>
    </div>

</body>
</html>

spreadsheet.js

$(document).ready(function () {
    $("#resultBlock").hide();
    $("#errorBlock").hide();
});

$(document).on("click", "#submit", function () {
    $("#resultBlock").hide();
    $("#errorBlock").hide();

    var apiKey = $("#apiKey").val().trim(); //Get your API key by registering at http://www.bytescout.com/

    var urlUploadFile = "https://bytescout.io/api/v1/file/upload?apiKey=" + apiKey;

    var formData = new FormData($("#form")[0]);

    $.ajax({
        url: urlUploadFile,
        type: "POST",
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function (fileId) {
            ConvertSpreadsheet(apiKey, fileId);
        },
        error: function (response) {
            $("#errorBlock").show();
            $("#statusCode").html(response.status);
            $("#errors").html("");
            $.each(response.responseJSON.Errors, function() {
                $("#errors").append($("<li></li>").html(this));
            });
        }
    });
});

function ConvertSpreadsheet(apiKey, fileId) {
    var url = "https://bytescout.io/api/v1/spreadsheet/convert?apiKey=" + apiKey;

    var options = {
        "properties": {
            "convertType": $("#convertType").val(),
            "createNavigationLinks": true,
            "autoSize": false
        },
        "inputType": "FileId",
        "input": fileId,
        "iutputType": "link"
    };

    $.ajax({
        url: url,
        type: "POST",
        data: JSON.stringify(options),
        contentType: "application/json",
        success: function (link) {
            $("#resultBlock").show();
            $("#result").attr("href", link).html(link);
        },
        error: function (response) {
            $("#errorBlock").show();
            $("#statusCode").html(response.status);
            $("#errors").html("");
            $.each(response.responseJSON.Errors, function() {
                $("#errors").append($("<li></li>").html(this));
            });
        }
    });
}