How to Add Text to PDF Files with JavaScript in NodeJS

Why Add Text to PDF Files with JavaScript?

The pdfRest Add to PDF API Tool is a powerful solution for developers looking to programmatically add text to PDF documents. By using JavaScript, you can easily integrate this functionality into your web applications, allowing for dynamic PDF content updates. This tutorial will guide you through the process of sending an API call to the Add to PDF endpoint using JavaScript.

Imagine a scenario where a company needs to generate personalized invoices for its clients. By using the Add to PDF API, the company can automate the process of adding client-specific details, such as names and billing information, directly onto a PDF template. This not only saves time but also reduces the possibility of errors that can occur with manual entry.

Add Text to PDF Files with JavaScript Code Example

/**
 * This request demonstrates how to add text to a PDF.
 * Horizontal and vertical offsets of the text are measured in PDF units. (1 inch = 72 PDF units)
 */
var axios = require('axios');
var FormData = require('form-data');
var fs = require('fs');

// Create a new form data instance and append the PDF file and parameters to it
var data = new FormData();
data.append('file', fs.createReadStream('/path/to/file'));
var text_option_array = [];
var text_options = {
    "font":"Times New Roman",
    "max_width":"175",
    "opacity":"1",
    "page":"1",
    "rotation":"0",
    "text":"sample text in PDF",
    "text_color_rgb":"0,0,0",
    "text_size":"30",
    "x":"72",
    "y":"144"
};
text_option_array.push(text_options);
data.append('text_objects', JSON.stringify(text_option_array));
data.append('output', 'pdfrest_pdf_with_added_text');

// define configuration options for axios request
var config = {
  method: 'post',
  maxBodyLength: Infinity, // set maximum length of the request body
  url: 'https://api.pdfrest.com/pdf-with-added-text', 
  headers: { 
    'Api-Key': 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', // Replace with your API key
    ...data.getHeaders() // set headers for the request
  },
  data : data // set the data to be sent with the request
};

// send request and handle response or error
axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error); 
});

// If you would like to download the file instead of getting the JSON response, please see the 'get-resource-id-endpoint.js' sample.

Source: GitHub Repository

Breaking Down the Code

The code begins by requiring necessary modules: axios for HTTP requests, form-data for handling form data, and fs for file system operations.

var data = new FormData();
data.append('file', fs.createReadStream('/path/to/file'));

Here, a new instance of FormData is created. The PDF file to be processed is appended to this instance using a file stream. Ensure the file path is correct.

var text_options = {
    "font":"Times New Roman",
    "max_width":"175",
    "opacity":"1",
    "page":"1",
    "rotation":"0",
    "text":"sample text in PDF",
    "text_color_rgb":"0,0,0",
    "text_size":"30",
    "x":"72",
    "y":"144"
};

The text_options object specifies the text attributes to be added to the PDF. Each parameter is crucial:

• font: The font type for the text.
• max_width: Maximum width of the text box in PDF units.
• opacity: Opacity level of the text.
• page: Page number where the text will be added.
• rotation: Rotation angle of the text.
• text: The actual text content to be added.
• text_color_rgb: RGB color values for the text.
• text_size: Size of the text.
• x and y: Coordinates for text placement.

var config = {
  method: 'post',
  maxBodyLength: Infinity,
  url: 'https://api.pdfrest.com/pdf-with-added-text', 
  headers: { 
    'Api-Key': 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    ...data.getHeaders()
  },
  data : data
};

The config object defines the request parameters, including the HTTP method, endpoint URL, headers, and the data payload. The API key must be replaced with a valid key.

Beyond the Tutorial

In this tutorial, you learned how to use JavaScript to send an API request to pdfRest's Add to PDF endpoint, allowing you to add text to a PDF document programmatically. This can be a valuable tool for automating document processing tasks.

Explore more about pdfRest's capabilities by trying out all the API Tools in the API Lab. For detailed information, refer to the API Reference Guide.

Note: This is an example of a multipart API call. Code samples using JSON payloads can be found here.