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

In this article we’ll be exploring two files “Sample.html” and “converter.js“.

“Sample.html” file contains html structure for input and output. It also contains reference for jquery library and “converter.js” script file. Script file “converter.js” is build on top of jQuery. It basically handles “Convert” button click event.

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&amp;amp;contenttype=application/pdf&amp;amp;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 + '&amp;amp;encrypt=true&amp;amp;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');
                    }
                  });                
        

                }
            }
        });
});

Though this program is simple and pretty straight-forward lets briefly analyze “convert” button’s click event logic inside “converter.js” file.

Here, Primarily we’re making three api calls.

1. Getting pre-signed url
Api endpoint “https://bytescout.io/v1/file/upload/get-presigned-url?name=test.pdf&contenttype=application/pdf&encrypt=true” is invoked along with api-keys in header, which will basically give pre-signed url. Here we hard-coded output file name (test.pdf) as it’s for demo purpose, when in production you should replace it with logical output file name.

Result of this call is pre-signed url which is utilized to post input file.

2. Using pre-signed url and uploading input file
In this stage we’re using pre-signed url received by previous api call and uploading user input file.

...
var formData = new FormData($("#form")[0]); // file to upload
...

$.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,
...

After file upload is completed third api is called which performs converting pdf document.

3. Converting spreadsheet

Now that we have file uploaded to presignedUrl, we’ll use this url as input to bytescout spreadsheet conversion api as showed below.

...
var toType = $("#convertType").val(); // output type
...
$.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) {
...

Variable “toType” refers to the drop-down which holds output type value.

That’s it guys, I hope you get insight of ByteScout Cloud API to convert document to different formats.

Happy Coding!

Sample.html

converter.js

Tutorials:

Web API