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:
opacitycontrols transparency from0to1.rotationcontrols the text angle in degrees.pagescan be'all','first','odd', or'even'.stylecontrols 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',
},
},
};"use client";
import React, {
useCallback,
useMemo,
useRef,
useState,
StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import "./styles.css";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
ModuleRegistry,
PdfExportParams,
enableDevValidations,
} from "ag-grid-community";
import { ContextMenuModule, PdfExportModule } from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
const modules = [ClientSideRowModelModule, PdfExportModule, ContextMenuModule];
interface ReportRow {
item: string;
owner: string;
status: string;
}
const GridExample = () => {
const gridRef = useRef<AgGridReact<ReportRow>>(null);
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [rowData, setRowData] = useState<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 [columnDefs, setColumnDefs] = useState<ColDef[]>([
{ field: "item", flex: 1 },
{ field: "owner", flex: 1 },
{ field: "status", flex: 1 },
]);
const defaultPdfExportParams = useMemo<PdfExportParams>(() => {
return {
page: {
orientation: "portrait",
},
watermark: {
text: "DRAFT",
opacity: 0.12,
rotation: -45,
pages: "all",
style: {
color: "#6b7280",
fontSize: 92,
fontWeight: "bold",
},
},
};
}, []);
const onBtExport = useCallback(() => {
gridRef.current!.api.exportDataAsPdf();
}, []);
return (
<AgGridProvider modules={modules}>
<div style={containerStyle}>
<div className="container">
<button onClick={onBtExport}>Export PDF</button>
<div className="grid-wrapper">
<div style={gridStyle}>
<AgGridReact<ReportRow>
ref={gridRef}
rowData={rowData}
columnDefs={columnDefs}
defaultPdfExportParams={defaultPdfExportParams}
/>
</div>
</div>
</div>
</div>
</AgGridProvider>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<GridExample />
</StrictMode>,
);
.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%;
}
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.
A text watermark rendered across the content of selected pages.
|
PdfWatermark Copy Link
Properties available on the PdfWatermark interface.
Text displayed diagonally across the exported page content. |
Text opacity from 0 (transparent) to 1 (opaque). |
Rotation in degrees. |
Pages on which the watermark is rendered. |
Text styling for the watermark. |