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

This code in JavaScript shows how to add text and images to PDF with this how to tutorial

Every ByteScout tool contains example JavaScript source codes that you can find here or in the folder with installed ByteScout product. What is Web API? It is the flexible Web API that includes full set of functions from e-signature requests to data extraction, OCR, images recognition, pdf splitting and pdf splitting. Can also generate barcodes and read barcodes from images, scans and pdf. It can help you to add text and images to PDF in your JavaScript application.

This code snippet below for 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 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.

Download free trial version of Web API from our website with this and other 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 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: '', 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) { // Request Url var cUrl = ''; // Input Data var data = { name: 'result.pdf', type: annotation, x: destinationXCoordinate, y: destinationYCoordinate, text: inputText, fontname: fontName, size: fontSize, color: fontColor, url: presignedUrl }; $("#status").html('Processing... &nbsp;&nbsp;&nbsp; <img src="ajax-loader.gif" />'); $.ajax({ url: cUrl, type: 'POST', headers: { 'x-api-key': apiKey }, processData: false, contentType: false, data: 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'); } }); } } }); });



Get 60 Day Free Trial

See also:


Get Your API Key

See also:

Related Samples: