Link Search Menu Expand Document

Add Text to Existing PDF (jQuery) - JavaScript

PDF Add Text, Signatures and Images to PDF sample in JavaScript demonstrating ‘Add Text to Existing PDF (jQuery)’

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');
                    }
                });
            }
        }
    });
});


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="addTextToPDF.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>Source PDF File Url</label>
            <input type="file" id="SourceFile" placeholder="Upload Source File" />
        </p>
        <p>
            <label>Text</label>
            <input type="text" id="inputText" placeholder="Input Text" value="APPROVED" />
        </p>
        <p>
            <label>Font Name</label>
            <input type="text" id="fontName" placeholder="Font Name" value="Times New Roman" />
        </p>
        <p>
            <label>Font Size</label>
            <input type="text" id="fontSize" placeholder="Font Size" value="24" />
        </p>
        <p>
            <label>Color</label>
            <input type="text" id="fontColor" placeholder="Color" value="FF0000" />
        </p>
        <p>
            <label>Destination Co-ordinates - </label>
            <b>X: </b> <input type="text" id="destinationXCoordinate" value="400" /> &nbsp;&nbsp;&nbsp;
            <b>Y: </b> <input type="text" id="destinationYCoordinate" value="600" /> 
        </p>
        <p>
            <label>Destination Image Size - </label>
            <b>Height: </b> <input type="text" id="destinationHeight" value="32" /> &nbsp;&nbsp;&nbsp;
            <b>Width: </b> <input type="text" id="destinationWidth" value="119" /> 
        </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>
        <pre id="inlineOutput"></pre><br/>
        <iframe id="iframeResultPdf" src="" width="100%" height="500px"></iframe>
    </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!

Download Source Code (.zip)

return to the previous page explore PDF Add Text, Signatures and Images to PDF endpoint