How to add text and images to PDF in JavaScript with PDF.co 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 PDF.co 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 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 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 PDF.co Web API from our website with this and other source code samples for JavaScript.

Try PDF.co Web API today:  60 Day Free Trial (on-premise) or  Web API (on-demand version)

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/documentation/api 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 $("#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) { var cUrl = 'https://api.pdf.co/v1/pdf/edit/add?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: 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'); } }); } } }); });

Try PDF.co Web API today:  60 Day Free Trial (on-premise) or  Web API (on-demand version)

VIDEO

ON-PREMISE VERSION INFORMATION

Get 60 Day Free Trial or Visit PDF.co Web API Home Page

Explore PDF.co Web API Documentation

Get PDF.co Web API Free Training

WEB API

Get Your Free API Key

Explore Web API Documentation

Related Samples: