return to previous page explore PDF Merge endpoint

Merge PDF Documents (jQuery) - JavaScript

PDF Merge sample in JavaScript demonstrating ‘Merge PDF Documents (jQuery)’

View on GitHub Download Source Code (.zip)

merge.js

var apiKey, uploadedFile1Url, uploadedFile2Url;

$(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

    apiKey = $("#apiKey").val().trim(); //Get your API key at https://app.pdf.co

    var formData1 = $("#form input[type=file]")[0].files[0] // file to upload
    var formData2 = $("#form input[type=file]")[1].files[0] // file to upload

    var uploadFile2CallbackFn = function (uploadedUrl) {
        uploadedFile2Url = uploadedUrl;

        // Perform Merge
        MergeFiles(uploadedFile1Url, uploadedFile2Url);
    }

    var uploadFile1CallbackFn = function (uploadedUrl) {
        uploadedFile1Url = uploadedUrl;

        // Upload File - 2
        uploadFile(formData2, uploadFile2CallbackFn);
    }

    // Upload File - 1
    uploadFile(formData1, uploadFile1CallbackFn);

});

function uploadFile(formData, callbackFunction) {
    $.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) {
                console.log(result);
                var presignedUrl = result['presignedUrl']; // reading provided presigned url to put our content into
                var uploadedUrl = result['url']; // Uploaded URL

                $("#status").html('Uploading File ... &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('File Uploaded');

                        if (typeof callbackFunction === "function") {
                            callbackFunction(uploadedUrl);
                        }
                    },
                    error: function () {
                        $("#status").text('error');
                    }
                });
            }
        }
    });
}

function MergeFiles(url1, url2) {
   
    var oBody = {
        "url": `${url1},${url2}`,
        "name": "result.pdf"
    };

    $("#status").html('Processing Merge... &nbsp;&nbsp;&nbsp; <img src="ajax-loader.gif" />');

    $.ajax({
        url: 'https://api.pdf.co/v1/pdf/merge',
        type: 'POST',
        headers: { 'x-api-key': apiKey, 'Content-Type': 'application/json' },
        data: JSON.stringify(oBody),
        contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
        processData: false, // NEEDED, DON'T OMIT THIS
        success: function (result) {
            $("#status").text('Success!');

            $("#resultBlock").show();
            $("#inlineOutput").html('<iframe style="width:100%; height:500px;" src="' + 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="merge.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 - 1</label>
            <input type="file" name="file" id="inputFile_1" />
        </p>
        <p>
            <label>Input PDF File - 2</label>
            <input type="file" name="file" id="inputFile_2" />
        </p>
        <button type="button" id="submit">Perform Merge</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!

Merge PDF Documents (jQuery) - JavaScript

merge.js

sample.html

Download Source Code (.zip)

return to the previous page explore PDF Merge endpoint