---
product: "AG Grid"
title: "PDF Export"
description: "PDF Export creates a paginated PDF representation of grid data without requiring third-party libraries. The export follows the grid's current data state and displayed columns, but it is not a screenshot and does not reproduce every visual feature rendered in the browser."
enterprise: true
framework: react
version: "36.2.0"
related:
    - title: "CSV Export"
      url: "https://www.ag-grid.com/react-data-grid/csv-export/"
    - title: "Excel Export"
      url: "https://www.ag-grid.com/react-data-grid/excel-export/"
    - title: "Excel Import"
      url: "https://www.ag-grid.com/react-data-grid/excel-import/"
    - title: "Clipboard"
      url: "https://www.ag-grid.com/react-data-grid/clipboard/"
    - title: "Drag & Drop"
      url: "https://www.ag-grid.com/react-data-grid/drag-and-drop/"
    - title: "Printing"
      url: "https://www.ag-grid.com/react-data-grid/printing/"
llms: "https://www.ag-grid.com/llms.txt"
---

# PDF Export

PDF Export creates a paginated PDF representation of grid data without requiring third-party libraries. The export follows the grid's current data state and displayed columns, but it is not a screenshot and does not reproduce every visual feature rendered in the browser.

Reorder columns or apply filtering and sorting in the following example, then export from the context menu or with the **Export to PDF** button.

#### Default PDF Export

```tsx
"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,
  NumberFilterModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  PdfExportModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
import { useFetchJson } from "./useFetchJson";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

const modules = [
  TextFilterModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  PdfExportModule,
  ColumnMenuModule,
  ContextMenuModule,
];

const GridExample = () => {
  const gridRef = useRef<AgGridReact<IOlympicData>>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);

  const [columnDefs, setColumnDefs] = useState<(ColDef | ColGroupDef)[]>([
    {
      headerName: "Group A",
      children: [
        { field: "athlete", minWidth: 200 },
        { field: "country", minWidth: 200 },
      ],
    },
    {
      headerName: "Group B",
      children: [
        { field: "sport", minWidth: 150 },
        { field: "gold" },
        { field: "silver" },
        { field: "bronze" },
        { field: "total" },
      ],
    },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      filter: true,
      minWidth: 100,
      flex: 1,
    };
  }, []);

  const { data, loading } = useFetchJson<IOlympicData>(
    "https://www.ag-grid.com/example-assets/small-olympic-winners.json",
  );

  const onBtExport = useCallback(() => {
    gridRef.current!.api.exportDataAsPdf();
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="container">
          <div>
            <button
              onClick={onBtExport}
              style={{ marginBottom: "5px", fontWeight: "bold" }}
            >
              Export to PDF
            </button>
          </div>
          <div className="grid-wrapper">
            <div style={gridStyle}>
              <AgGridReact<IOlympicData>
                ref={gridRef}
                rowData={data}
                loading={loading}
                columnDefs={columnDefs}
                defaultColDef={defaultColDef}
              />
            </div>
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

[Live example: Default PDF Export](https://www.ag-grid.com/examples/pdf-export/pdf-default-export/reactFunctionalTs/)

## Enabling PDF Export

Export from the enterprise [Context Menu](https://www.ag-grid.com/react-data-grid/context-menu/) using the **PDF Export** item, or call the [Grid API](https://www.ag-grid.com/react-data-grid/grid-api/) directly. For module-based builds, register `PdfExportModule`.

```jsx
gridApi.exportDataAsPdf();
```

Set `suppressPdfExport=true` to disable both `exportDataAsPdf()` and `getDataAsPdf()`.

## Default PDF Export

The export uses the current column order and visibility, together with the filtered, sorted, and grouped row data. Exported values are produced independently of the rendered grid cells, using Value Getters and, by default, [Value Formatters](https://www.ag-grid.com/react-data-grid/value-formatters/#formatting-for-export).

By default, regular columns use their current column widths in the grid and the Row Numbers column is sized from its exported content. Columns are proportionally reduced when their combined width exceeds the printable page width. Cells remain on one line unless wrapping is enabled, and table headers repeat when a table continues onto another page.

PDF Export uses the built-in PDF Base 14 fonts with WinAnsi encoding by default. Register static TrueType font families to export Unicode text or use right-to-left text layout.

The table below summarises what is supported and what is not:

| Area | Supported | Not Supported |
| --- | --- | --- |
| Grid state | Displayed column order and visibility, sorting, filtering, selected-row export options, grouping, pinned rows, column spans | Cell Renderer output or custom HTML |
| Layout | Named and custom page sizes, margins, orientation, column widths, text wrapping, automatic row height, repeated table headers, page headers and footers | Automatic page size and horizontal pagination |
| Styling | Theme colours, `colors`, supported `rowStyle`, `cellStyle`, and `headerStyle` properties, PDF-specific style callbacks, text watermarks | `cellClass`, `cellClassRules`, arbitrary CSS, automatic browser-font discovery |
| Content | Value Getters, Value Formatters, export value callbacks, title and subtitle, page headers and footers, cover pages, additional content, JPEG and PNG images, external URI hyperlinks | SVG, GIF, internal page links, embedded files |
| Text | Built-in PDF fonts, embedded static TrueType fonts, Unicode characters covered by registered fonts, OpenType shaping, horizontal Arabic and Hebrew text | CFF, variable, WOFF/WOFF2 and collection fonts; vertical writing and bidirectional text across independently styled runs |

## PDF Export Sections

- **[Styles](https://www.ag-grid.com/react-data-grid/pdf-export-styles/)**: Reuse supported grid styles and apply PDF-specific overrides.
- **[Languages](https://www.ag-grid.com/react-data-grid/pdf-export-languages/)**: Register TrueType font families and export Unicode or right-to-left text.
- **[Extra Content](https://www.ag-grid.com/react-data-grid/pdf-export-extra-content/)**: Add titles, page furniture, cover pages, and additional content.
- **[Customising Content](https://www.ag-grid.com/react-data-grid/pdf-export-customising-content/)**: Customise exported cell, row-group, header, and group-header values.
- **[Images](https://www.ag-grid.com/react-data-grid/pdf-export-images/)**: Embed JPEG and PNG images in grid cells, page headers, and page footers.
- **[Watermarks](https://www.ag-grid.com/react-data-grid/pdf-export-watermarks/)**: Add translucent status text across selected pages.
- **[Rows](https://www.ag-grid.com/react-data-grid/pdf-export-rows/)**: Select rows and configure filtered, sorted, and pinned-row export.
- **[Columns](https://www.ag-grid.com/react-data-grid/pdf-export-columns/)**: Choose columns, headers, groups, Row Numbers, and widths.
- **[Hyperlinks](https://www.ag-grid.com/react-data-grid/pdf-export-hyperlinks/)**: Add external URI links to grid cells and custom content.
- **[Master Detail](https://www.ag-grid.com/react-data-grid/pdf-export-master-detail/)**: Include a PDF representation of detail data below master rows.
- **[Page Setup](https://www.ag-grid.com/react-data-grid/pdf-export-page-setup/)**: Configure page size, orientation, margins, and repeated table headers.
- **[API Reference](https://www.ag-grid.com/react-data-grid/pdf-export-api/)**: PDF export methods, grid options, interfaces, and types.