How to add text and images to PDF in JavaScript and Web API

Write code in JavaScript to add text and images to PDF with this step-by-step tutorial

The sample source code below will teach you how to add text and images to PDF in JavaScript. Web API is the Rest API that provides set of data extraction functions, tools for documents manipulation, splitting and merging of pdf files. Includes built-in OCR, images recognition, can generate and read barcodes from images, scans and pdf and you can use it to add text and images to PDF with JavaScript.

The SDK samples like this one below explain how to quickly make your application do add text and images to PDF in JavaScript with the help of Web API. Just copy and paste the code into your JavaScript application’s code and follow the instruction. Code testing will allow the function to be tested and work properly with your data.

You can download free trial version of Web API from our website to see and try many others source code samples for JavaScript.

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

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


$(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 var signatureImageUrl = $("#signatureImageUrl").val(); var destinationXCoordinate = $("#destinationXCoordinate").val(); var destinationYCoordinate = $("#destinationYCoordinate").val(); var destinationHeight = $("#destinationHeight").val(); var destinationWidth = $("#destinationWidth").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: '', 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 $("#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) { // API URL var cUrl = ''; // Input data var data = { name: 'result.pdf', type: image, x: destinationXCoordinate, y: destinationYCoordinate, width: destinationWidth, height: destinationHeight, urlimage: signatureImageUrl, url: presignedUrl }; $("#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' }, data: data, processData: false, contentType: false, //data: oData, 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'); } }); } } }); });



Get 60 Day Free Trial

See also:


Get Your API Key

See also:

Related Samples: