How to Merge PDF Documents (jQuery) for PDF Merging API in JavaScript with PDF.co Web API

How to Merge PDF Documents (jQuery) in JavaScript with Easy Code Samples to Make PDF Merging API. Step-by-Step Tutorial

Today we will explain the steps and the algorithm of how to merge PDF documents (jQuery) and how to make it work in your application. PDF merging API in JavaScript can be implemented with PDF.co Web API. PDF.co Web API is the flexible Web API that includes a full set of functions from e-signature requests to data extraction, OCR, image recognition, PDF splitting, and PDF splitting. Can also generate barcodes and read barcodes from images, scans, and PDF.

The SDK samples like this one below explain how to quickly make your application do PDF merging API in JavaScript with the help of PDF.co Web API. For the implementation of this functionality, please copy and paste the code below into your app using the code editor. Then compile and run your app. This basic programming language sample code for JavaScript will do the whole work for you in implementing PDF merging API in your app. You can also visit our docs for code sample in jQuery as well as other languages.

The trial version of ByteScout is available for free download from our website. This and other source code samples for JavaScript and other programming languages are available.

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:

ON-DEMAND REST WEB API

Get Your API Key

See also: