How to Add Text and Images to PDF in JavaScript using PDF.co Web API

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.

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

Adding text or images to existing PDF is a very useful feature, and we’ll be reviewing that in this article. 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 the same way. The full code snippet can be found here, also other variations of source code in different languages can be found here.

Let’s start by reviewing the source code and its 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)

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.
// You can also upload your own file into PDF.co and use it as url. Check "Upload File" samples for code snippets: https://github.com/bytescout/pdf-co-api-samples/tree/master/File%20Upload/    
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 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,
    url: SourceFileUrl,
    images: [
        {
            url: ImageUrl,
            x: X,
            y: Y,
            width: Width,
            height: Height,
            pages: Pages,
        }
    ]
});

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

Add Image to PDF Node js

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

Initially, we’re gathering all the necessary data for PDF modification 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 the JSON payload for the 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 the 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 calls. Please visit PDF.co documentation 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: