---
product: "AG Grid"
title: "PDF Export - Watermarks"
description: "PDF watermarks display translucent status text, such as or , across the exported page content. Watermarks do not affect table measurement or pagination."
enterprise: true
framework: vue
version: "36.2.0"
related:
    - title: "Styles"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-styles/"
    - title: "Languages"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-languages/"
    - title: "Extra Content"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-extra-content/"
    - title: "Customising Content"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-customising-content/"
    - title: "Images"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-images/"
    - title: "Rows"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-rows/"
    - title: "Columns"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-columns/"
    - title: "Hyperlinks"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-hyperlinks/"
    - title: "Master Detail"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-master-detail/"
    - title: "Page Setup"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-page-setup/"
    - title: "API Reference"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-api/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# PDF Export - Watermarks

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

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.

```ts
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.

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

#### PDF Text Watermark

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  PdfExportParams,
  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;
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="container">
      <button v-on:click="onBtExport()">Export PDF</button>
      <div class="grid-wrapper">
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :rowData="rowData"
          :columnDefs="columnDefs"
          :defaultPdfExportParams="defaultPdfExportParams"></ag-grid-vue>
        </div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<ReportRow> | null>(null);
    const rowData = ref<ReportRow[] | null>(
      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 = ref<ColDef[]>([
      { field: "item", flex: 1 },
      { field: "owner", flex: 1 },
      { field: "status", flex: 1 },
    ]);
    const defaultPdfExportParams = ref<PdfExportParams>({
      page: {
        orientation: "portrait",
      },
      watermark: {
        text: "DRAFT",
        opacity: 0.12,
        rotation: -45,
        pages: "all",
        style: {
          color: "#6b7280",
          fontSize: 92,
          fontWeight: "bold",
        },
      },
    });

    function onBtExport() {
      gridApi.value.exportDataAsPdf();
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      rowData,
      columnDefs,
      defaultPdfExportParams,
      onGridReady,
      onBtExport,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: PDF Text Watermark](https://www.ag-grid.com/archive/36.2.0/examples/pdf-export-watermarks/pdf-text-watermark/vue3/)

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

## Known Limitations

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

## API

### Export Options

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

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `watermark` | `PdfWatermark` |  |  |  |

### PdfWatermark

Properties available on the `PdfWatermark` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `text` | `string` |  |  |  |
| `opacity` | `number` |  |  |  |
| `rotation` | `number` |  |  |  |
| `pages` | `PdfWatermarkPageSelection` |  |  |  |
| `style` | `PdfTextStyle` |  |  |  |