How to Add Tables to PDF Files with JavaScript in NodeJS

Find out how to use JavaScript in NodeJS to add dynamic tables to PDF documents through the pdfRest API.
Share this page

Why Add Tables to PDF with JavaScript?

The pdfRest Add to PDF API Tool is a powerful resource that allows developers to programmatically add tables and other elements to PDF documents. This tutorial will guide you through the process of sending an API call to the Add to PDF endpoint using JavaScript, enabling you to enhance your PDF files with structured and styled tables.

A project manager might need to generate a project status report in PDF format that includes a table summarizing tasks, owners, and their current status. By using the Add to PDF API, the manager can automate this process, ensuring that the document is both accessible and visually appealing, complete with headers, colored status cells, and a footer.

Add Tables to PDF with JavaScript Code Example

/**
 * Add an accessible, styled project-status table to a PDF.
 * The table includes header cells, colored status cells, and a footer row.
 */
const axios = require("axios");
const FormData = require("form-data");
const fs = require("fs");

// By default, we use the US-based API service. This is the primary endpoint for global use.
const apiUrl = "https://api.pdfrest.com";

/* For GDPR compliance and enhanced performance for European users, you can switch to the EU-based service by uncommenting the URL below.
 * For more information visit https://pdfrest.com/pricing#how-do-eu-gdpr-api-calls-work
 */
// const apiUrl = "https://eu-api.pdfrest.com";

const tables = [
  {
    page: 1,
    x: 54,
    y: 540,
    width: 504,
    columns: [{ width: 210 }, { width: 144 }, { width: 150 }],
    tag_structure_type: "Table",
    style: {
      padding: { top: 6, right: 8, bottom: 6, left: 8 },
      text_size: 10,
    },
    header_rows: [
      {
        cells: [
          { text: "Milestone", tag_structure_type: "TH", style: { background_color_rgb: [26, 72, 112], text_color_rgb: [255, 255, 255] } },
          { text: "Owner", tag_structure_type: "TH", style: { background_color_rgb: [26, 72, 112], text_color_rgb: [255, 255, 255] } },
          { text: "Status", tag_structure_type: "TH", style: { background_color_rgb: [26, 72, 112], text_color_rgb: [255, 255, 255] } },
        ],
      },
    ],
    rows: [
      { cells: [{ text: "Requirements review" }, { text: "Maya Chen" }, { text: "Complete", tag_structure_type: "TD", style: { background_color_rgb: [220, 252, 231] } }] },
      { cells: [{ text: "Prototype delivery" }, { text: "Jordan Lee" }, { text: "In progress", tag_structure_type: "TD", style: { background_color_rgb: [254, 249, 195] } }] },
      { cells: [{ text: "Stakeholder approval" }, { text: "Avery Patel" }, { text: "Planned", tag_structure_type: "TD", style: { background_color_rgb: [239, 246, 255] } }] },
    ],
    footer_rows: [
      { cells: [{ text: "Next review: Friday, 10:00 AM", col_span: 3, tag_structure_type: "TD", style: { background_color_rgb: [245, 247, 250], text_color_rgb: [55, 65, 81] } }] },
    ],
  },
];

const form = new FormData();
form.append("file", fs.createReadStream("/path/to/input.pdf"));
form.append("table_objects", JSON.stringify(tables));
form.append("tag_enabled", "true");
form.append("tag_language", "en-US");
form.append("output", "project-status");

axios({
  method: "post",
  maxBodyLength: Infinity,
  url: `${apiUrl}/pdf-with-added-tables`,
  headers: {
    "Api-Key": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", // Replace with your API key.
    ...form.getHeaders(),
  },
  data: form,
})
  .then((response) => console.log(JSON.stringify(response.data, null, 2)))
  .catch((error) => console.log(error.response?.data || error.message));

// To download the returned file, use the outputId with the get-resource-id endpoint sample.

Source: GitHub Repository

Breaking Down the Code

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

const axios = require("axios");
const FormData = require("form-data");
const fs = require("fs");

The apiUrl is set to the US-based endpoint by default. For European users, the EU-based endpoint can be used for GDPR compliance.

const apiUrl = "https://api.pdfrest.com";

The tables array defines the structure and style of the table to be added to the PDF. It includes details such as page number, position, column widths, and cell styles.

const tables = [
  {
    page: 1,
    x: 54,
    y: 540,
    width: 504,
    columns: [{ width: 210 }, { width: 144 }, { width: 150 }],
    tag_structure_type: "Table",
    style: {
      padding: { top: 6, right: 8, bottom: 6, left: 8 },
      text_size: 10,
    },
    header_rows: [
      {
        cells: [
          { text: "Milestone", tag_structure_type: "TH", style: { background_color_rgb: [26, 72, 112], text_color_rgb: [255, 255, 255] } },
          { text: "Owner", tag_structure_type: "TH", style: { background_color_rgb: [26, 72, 112], text_color_rgb: [255, 255, 255] } },
          { text: "Status", tag_structure_type: "TH", style: { background_color_rgb: [26, 72, 112], text_color_rgb: [255, 255, 255] } },
        ],
      },
    ],
    rows: [
      { cells: [{ text: "Requirements review" }, { text: "Maya Chen" }, { text: "Complete", tag_structure_type: "TD", style: { background_color_rgb: [220, 252, 231] } }] },
      { cells: [{ text: "Prototype delivery" }, { text: "Jordan Lee" }, { text: "In progress", tag_structure_type: "TD", style: { background_color_rgb: [254, 249, 195] } }] },
      { cells: [{ text: "Stakeholder approval" }, { text: "Avery Patel" }, { text: "Planned", tag_structure_type: "TD", style: { background_color_rgb: [239, 246, 255] } }] },
    ],
    footer_rows: [
      { cells: [{ text: "Next review: Friday, 10:00 AM", col_span: 3, tag_structure_type: "TD", style: { background_color_rgb: [245, 247, 250], text_color_rgb: [55, 65, 81] } }] },
    ],
  },
];

A FormData object is created to hold the PDF file and table data. The file field is the PDF to which the table will be added, and table_objects contains the table structure.

const form = new FormData();
form.append("file", fs.createReadStream("/path/to/input.pdf"));
form.append("table_objects", JSON.stringify(tables));
form.append("tag_enabled", "true");
form.append("tag_language", "en-US");
form.append("output", "project-status");

The axios call sends a POST request to the pdf-with-added-tables endpoint, including headers for the API key and form data.

axios({
  method: "post",
  maxBodyLength: Infinity,
  url: `${apiUrl}/pdf-with-added-tables`,
  headers: {
    "Api-Key": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", // Replace with your API key.
    ...form.getHeaders(),
  },
  data: form,
})

Beyond the Tutorial

In this tutorial, you learned how to use the pdfRest Add to PDF API Tool to add a styled table to a PDF document using JavaScript. This example demonstrates how to structure your API call and handle the response.

To explore further, try out all the pdfRest API Tools in the API Lab. For more detailed information, refer to the API Reference Guide. This example shows a multipart API call; for JSON payload examples, visit the GitHub Repository.

Generate a self-service API Key now!
Create your FREE API Key to start processing PDFs in seconds, only possible with pdfRest.