How to Add Text and Images to PDF in JavaScript and PDF.co Web API

PDF.co Web API is 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.

This code in JavaScript Shows How to Add Text and Images to PDF

Every API in JS contains an example JavaScript source code that you can find here. What is PDF.co Web API? It 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 merging. It can also generate barcodes and read barcodes from images, scans, and PDF. It can help you add text and images to PDF in your JavaScript application.

This code snippet below for PDF.co Web API works best when you need to quickly add text and images to PDF in your JavaScript application. In your JavaScript project or application, you may simply copy & paste the code and then run your app! Implementing a JavaScript application typically includes multiple stages of the software development so even if the functionality works please test it with your data and the production environment.

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

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

addTextToPDF.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

    var inputText = $("#inputText").val();
    var fontName = $("#fontName").val();
    var fontSize = $("#fontSize").val();
    var fontColor = $("#fontColor").val();

    var destinationXCoordinate = $("#destinationXCoordinate").val();
    var destinationYCoordinate = $("#destinationYCoordinate").val();

    var formData = $("#SourceFile")[0].files[0]; // file to upload

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

    $.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... &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) {

                        // Request Url
                        var cUrl = 'https://api.pdf.co/v1/pdf/edit/add';

                        // Input Data
                        var data = {
                            name: 'result.pdf',
                            url: uploadedUrl,
                            annotations: [{
                                x: destinationXCoordinate,
                                y: destinationYCoordinate,
                                text: inputText,
                                fontname: fontName,
                                size: fontSize,
                                color: fontColor
                            }]
                        };

                        $("#status").html('Processing... &nbsp;&nbsp;&nbsp; <img src="ajax-loader.gif" />');
                        $.ajax({
                            url: cUrl,
                            type: 'POST',
                            headers: { 'x-api-key': apiKey, 'Content-Type': 'application/json'  },
                            processData: false,
                            contentType: false,
                            data: JSON.stringify(data),
                            success: function (result) {
                                $("#status").text('done processing.');

                                if (result.error) {
                                    $("#errorBlock").show();
                                    $("#errors").text(result.message);
                                } else {
                                    $("#resultBlock").show();
                                    $("#inlineOutput").text(JSON.stringify(result));
                                    $("#iframeResultPdf").prop("src", result.url);
                                }
                            }
                        });

                    },
                    error: function () {
                        $("#status").text('error');
                    }
                });
            }
        }
    });
});

VIDEO

ON-PREMISE OFFLINE SDK

Get 60 Day Free Trial

See also:

ON-DEMAND REST WEB API

Get Your API Key

See also: