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

PDF.co Web API is the Rest API that provides a set of data extraction functions, tools for documents manipulation, splitting and merging of PDF files. It includes built-in OCR, images recognition, can generate and read barcodes from images, scans and pdf.

Adding text or images to existing PDF is a very useful feature, and we’ll be reviewing that in this articles. We’ll be using NodeJs in combination with PDF.co API. This program specifically demonstrates how to add image, however text can be added in same way. The full code snippet can be found here, also other variation of source code in different languages can be found here.

Let’s start with reviewing source code and it’s output. We’ll be analyzing important code snippets later.

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

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

Source Code:

app.js

      
var https = require("https"); var path = require("path"); var fs = require("fs"); // The authentication key (API Key). // Get your own by registering at https://app.pdf.co/documentation/api const API_KEY = "***********************************"; // Direct URL of source PDF file. const SourceFileUrl = "https://bytescout-com.s3.amazonaws.com/files/demo-files/cloud-api/pdf-edit/sample.pdf"; // Comma-separated list of page indices (or ranges) to process. Leave empty for all pages. Example: '0,2-5,7-'. const Pages = ""; // PDF document password. Leave empty for unprotected documents. const Password = ""; // Destination PDF file name const DestinationFile = "./result.pdf"; // Image params const Type = "image"; const X = 400; const Y = 20; const Width = 119; const Height = 32; const ImageUrl = "https://bytescout-com.s3.amazonaws.com/files/demo-files/cloud-api/pdf-edit/logo.png"; // * Add image * // Prepare request to `PDF Edit` API endpoint var queryPath = `/v1/pdf/edit/add`; // JSON payload for api request var jsonPayload = JSON.stringify({ name: path.basename(DestinationFile), password: Password, pages: Pages, url: SourceFileUrl, type: Type, x: X, y: Y, width: Width, height: Height, urlimage: ImageUrl }); var reqOptions = { host: "api.pdf.co", method: "POST", path: queryPath, headers: { "x-api-key": API_KEY, "Content-Type": "application/json", "Content-Length": Buffer.byteLength(jsonPayload, 'utf8') } }; // Send request var postRequest = https.request(reqOptions, (response) => { response.on("data", (d) => { // Parse JSON response var data = JSON.parse(d); if (data.error == false) { // Download the PDF file var file = fs.createWriteStream(DestinationFile); https.get(data.url, (response2) => { response2.pipe(file).on("close", () => { console.log(`Generated PDF file saved to '${DestinationFile}' file.`); }); }); } else { // Service reported error console.log(data.message); } }); }).on("error", (e) => { // Request error console.error(e); }); // Write request data postRequest.write(jsonPayload); postRequest.end();

package.json

      
{ "name": "test", "version": "1.0.0", "description": "PDF.co", "main": "app.js", "scripts": { }, "keywords": [ "pdf.co", "web", "api", "bytescout", "api" ], "author": "ByteScout & PDF.co", "license": "ISC", "dependencies": { "request": "^2.88.2" } }

Output:

Now that we’ve reviewed the source code and output image, Let’s analyze the code.

Initially we’re gathering all necessary data for PDF modifications like Source File URL, Pages on which text/image needs to be added, Input Image properties such as co-ordinates, width/height of the image, and Image URL. Next, we’re preparing JSON payload for API endpoint /v1/pdf/edit/add. We’re invoking an API endpoint along with a header containing an API key. The API response contains the URL of the generated PDF along with other parameters such as number of pages etc.

This is how easy to add images or text to PDF with PDF.co. This is a very simple test case, for advanced scenarios we can also add other parameters to API call. Please visit PDF.co documentations for more info.

Try to create a small demo like this on your machine with PDF.co to get read exposure. Thanks for reading!

VIDEO

ON-PREMISE OFFLINE SDK

Get 60 Day Free Trial

See also:

ON-DEMAND REST WEB API

Get Your API Key

See also:

Related Samples: