JavaScript Data GridPDF Export - Watermarks

Version 36.2.0

Enterprise

PDF watermarks display translucent status text, such as DRAFT or CONFIDENTIAL, across the exported page content. Watermarks do not affect table measurement or pagination.

Adding Watermarks Copy Link

Set watermark.text in the PDF export parameters. The default watermark is centred on every page, rotated by -45 degrees, and rendered with low opacity.

const defaultPdfExportParams = {
    watermark: {
        text: 'DRAFT',
    },
};

The following example exports a multi-page report with a customised watermark:

opacity controls transparency from 0 to 1.
rotation controls the text angle in degrees.
pages can be 'all', 'first', 'odd', or 'even'.
style controls the text colour, font, size, weight, and other supported text properties.

const defaultPdfExportParams = {
    watermark: {
        text: 'DRAFT',
        opacity: 0.12,
        rotation: -45,
        pages: 'all',
        style: {
            color: '#6b7280',
            fontSize: 92,
            fontWeight: 'bold',
        },
    },
};

main.ts

import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { ContextMenuModule, PdfExportModule } from "ag-grid-enterprise";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  PdfExportModule,
  ContextMenuModule,
]);

interface ReportRow {
  item: string;
  owner: string;
  status: string;
}

let gridApi: GridApi<ReportRow>;

const rowData: ReportRow[] = Array.from({ length: 60 }, (_, index) => ({
  item: `Work item ${index + 1}`,
  owner: ["Amelia", "Mateo", "Hana"][index % 3],
  status: index % 4 === 0 ? "In review" : "Complete",
}));

const gridOptions: GridOptions<ReportRow> = {
  columnDefs: [
    { field: "item", flex: 1 },
    { field: "owner", flex: 1 },
    { field: "status", flex: 1 },
  ],
  rowData,
  defaultPdfExportParams: {
    page: {
      orientation: "portrait",
    },
    watermark: {
      text: "DRAFT",
      opacity: 0.12,
      rotation: -45,
      pages: "all",
      style: {
        color: "#6b7280",
        fontSize: 92,
        fontWeight: "bold",
      },
    },
  },
};

function onBtExport() {
  gridApi.exportDataAsPdf();
}

gridApi = createGrid(
  document.querySelector<HTMLElement>("#myGrid")!,
  gridOptions,
);

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).onBtExport = onBtExport;
}

styles.css

.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 8px;
}

.container > button {
    align-self: flex-start;
    font-weight: bold;
}

.grid-wrapper {
    flex: 1 1 0;
}

#myGrid {
    width: 100%;
    height: 100%;
}

index.html

<div class="container">
    <button onclick="onBtExport()">Export PDF</button>
    <div class="grid-wrapper">
        <div id="myGrid"></div>
    </div>
</div>

The watermark is marked as a PDF artefact, so assistive technologies do not announce it as document content on every page.

Known Limitations Copy Link

Watermarks support text only. Image watermarks are not supported.
One watermark configuration can be applied to an export.

API Copy Link

Export Options Copy Link

See below the functions on the PdfExportParams interface to customise exported grid values.

PdfWatermark

A text watermark rendered across the content of selected pages.

PdfWatermark Copy Link

Properties available on the PdfWatermark interface.

string

Text displayed diagonally across the exported page content.

number

default: 0.12

Text opacity from 0 (transparent) to 1 (opaque).

number

default: -45

Rotation in degrees.

PdfWatermarkPageSelection

default: 'all'

Pages on which the watermark is rendered.

PdfTextStyle

Text styling for the watermark.

Getting Started

AI Features

Layout & Styling

Charting

Core Features

Advanced Features