PDF.co Web API – PDF Merging API – JavaScript – Merge PDF Documents (jQuery)

On-demand (REST Web API) version:
 Web API (on-demand version)

On-premise offline SDK for Windows:
 60 Day Free Trial (on-premise)

We’ll be reviewing the source code and its output first and then we’ll analyze the code.

merge.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/documentation/api

    var formData = new FormData();
    formData.append('name', 'result.pdf');
    
    // Append files in input request
    formData.append('file[]', $("#form input[type=file]")[0].files[0]);
    formData.append('file[]', $("#form input[type=file]")[1].files[0]);

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

    $.ajax({
        url: 'https://api.pdf.co/v1/pdf/merge',
        type: 'POST',
        headers: { 'x-api-key': apiKey },
        data: formData,
        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');
        }
    });
 });
    

Output

This program is very straightforward and simple to understand. On the HTML page, we’re displaying all controls like textbox for PDF.co API key, File Upload controls, visual controls for marking process start/end, and placeholder controls to display final output.

Then we’re gathering all necessary data for the API endpoint calls. PDF.co API key is necessary for authenticating requests at the PDF.co server. This API key is passed in the request header, with parameter name x-api-key.

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

Input files for mergin are collected as FormData collection.

    var formData = new FormData();
    formData.append('name', 'result.pdf');
    
    // Append files in input request
    formData.append('file[]', $("#form input[type=file]")[0].files[0]);
    formData.append('file[]', $("#form input[type=file]")[1].files[0]);

PDF.co endpoint /v1/pdf/merge is used to merge PDF documents. With ajax call as shown in following code snippet, we’re calling PDF.co merge API endpoint and retrieving merged output. Merged output is being displayed in IFrame element.

$.ajax({
        url: 'https://api.pdf.co/v1/pdf/merge',
        type: 'POST',
        headers: { 'x-api-key': apiKey },
        data: formData,
        contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
        processData: false, // NEEDED, DON'T OMIT THIS
        success: function (result) {
...
        }
    });

This is how easy and fun to merge PDF document with PDF.co and jQuery. Please visit PDF.co documentations for more information on this endpoint and other offerings.

Try this code in your machine to get better know how on PDF.co. Thank you for reading this article!

VIDEO

ON-PREMISE OFFLINE SDK

Get 60 Day Free Trial

See also:

• Explore Documentation
• Explore Source Code Samples
• Watch Video Course

ON-DEMAND REST WEB API

Get Your API Key

See also:

• Web API Docs
• Learn About Security
• Explore Source Code Samples