In this blogpost we will show you how to export AG Grid to PDF using the PDF document generation library pdfMake.

We've implemented this PDF export capability in JavaScript, React, Angular and Vue so you can easily integrate this in your projects and start exporting your AG Grids to PDF!

In the live demo below there are two configuration panels - PDF Export Options panel and Grid Options panel allowing to configure export and grid options separately. Please experiment with these options and click the EXPORT TO PDF button to see how AG Grid can be exported to PDF in all of these configurations.

Code Samples

You can view or download the example in each of the major frameworks below:

Contents

Integrating the PDF export feature for AG Grid in your codebase

Let's start by looking at how to integrate the PDF export feature shown in the live demo in your codebase.

We've built the necessary code to export AG Grid with pdfMake in a number of AG Grid configuration scenarios. This code is self-contained and is packaged in the pdfExport folder in the live sample above. All you need to do to integrate this capability is to include pdfMake in your codebase and drop the pdfExport folder from our live sample in your codebase.

You can then call a single method to export an AG Grid instance to PDF.

Let's now take a look at how you can customize the PDF export.

Configuring Column Export Options

As everyone has different PDF export needs, let's see how we can customize the PDF export appearance for AG Grid. In order to set the PDF export settings for an AG Grid column, we've added a custom column property pdfExportOptions.

Note: Setting the pdfExportOptions property is not required for it to be exported. By default the AG Grid column values get exported without any styling applied. If you'd like to customize the default export format, please set these options in the pdfExportOptions for the column in the column definition code.

See the full list of column definitions with the pdfExportOptions in the columnDefs.js file in the live demo.

Here are the PDF export options available in the pdfExportOptions interface that you can set on an AG Grid column:

interface pdfExportOptions {
	/** styles to be applied to cells 
    see supported list here: https://pdfmake.github.io/docs/0.1/document-definition-object/styling/. **/
	styles?: {
    	background: String,
        fontSize: Number,
        bold: Boolean,
        color: String,
		alignment: 'left' | 'center' | 'right',
	},
    /** creates a hyperlink for each value in a column **/
	createURL?: () => String,
    /** if true, does not include the column in the exported file **/
	skipColumn?: Boolean
}

Note: The pdfExportOptions.styles and pdfExportOptions.createURL will be applied to both our AG Grid instance and to our exported PDF file.

As part of the pdfExportOptions interface above we've added the most frequently-used styling options. However, you can extend this with any additional options you need from the full list of styling options supported by pdfMake. You can follow the approach we've used in pdfExportOptions and add support for any other styling properties you need.

Exporting to PDF

So, now that we've configured the column export options for AG Grid columns using the pdfExportOptions, starting the actual export is simple.

When you click the Export To PDF button in the sample, we execute the following code:

// ./pdfMake/index.js

function printDoc() {
	console.log("Exporting to PDF...");
	const docDefinition = getDocDefinition(
    	printParams, 
        gridOptions.api, 
        gridOptions.columnApi
	);
	pdfMake.createPdf(docDefinition).download();
}

The getDocDefinition function generates a docDefinition object based on the data in AG Grid, the print parameters, and the pdfExportOptions objects provided in the AG Grid columns. This is where all the AG Grid-pdfMake integration takes place. You can modify this integration code to change the default values we're using for export font size, hyperlink color, row background colors, etc., or modify the header and footer content.

Once we have the docDefinition we provide it as a parameter to pdfMake.createPdf(docDefinition).download() to print the generated table. That's all there is to it - making it easy for you to take our implementation of getDocDefinition, add it to your codebase and invoke it to generate the docDefinition for pdfMake to use when exporting.

Let's now go over the configurable options in our docDefinition object to set the export options.

Exporting with cell styles

You can set an option to export AG Grid to PDF with styling defined on the column-level. These styles are stored in the  styles property of  pdfExportOptions for each column.

In the live sample above, we have added a checkbox in the PDF Export Options panel to illustrate how to export to PDF with or without applying a cell style.

Let's say we have the AG Grid instance below, where each column is styled:

This is what export to PDF with cell styles looks like:

This is the export to PDF without applying cell styles:

Another frequent scenario is to add hyperlinks to the grid cell values in the PDF export. We add the hyperlink using a callback pdfExportOptions.createURL.

In the live sample above you can tick a checkbox to add hyperlinks to cell values in the ATHLETE column of AG Grid and export them in the PDF file. See the original AG Grid instance below:

When the checkbox is ticked, the ATHLETE column cells get exported with hyperlinks as shown below:

If you don't tick the checkbox, the grid gets exported to PDF without hyperlinks in the ATHLETE column cells:

Skipping columns in PDF export

You can easily exclude specific AG Grid columns from the PDF export. Just set pdfExportOptions.skipColumn = true on a column, and it won't be included in our exported file.

In our live demo application note that the 'Age' column has been configured to be skipped in the PDF export. Here's the original AG Grid (with the column marked in a pink rectangle):

Here's the PDF exported content - note the AGE column is not included:

Here's the code to skip the AGE column from the PDF export in the column definitions of AG Grid:

// ./columnDefs.js

const COL_AGE = {
  headerName: "Age (Not Exported)",
  field: "age",
  minWidth: 60,
  pdfExportOptions: {
    skipColumn: true
  }
};

Exporting selected rows only

Another frequent requirement is to only export the selected rows from the AG Grid instance. We've added a checkbox in the live sample to activate this mode.

So for the grid below, which has a number of rows selected:

When we export only the selected rows, this produces the PDF export below:

Exported header and cell heights

You can also easily customize the header and data row heights. In the live sample, we have number input fields to set the header row height (default value of 25px) and the data row heights (default value of 15px) in the PDF export.

Note that we have enabled text wrapping so that the rows may grow vertically if their contents require more space.

Here's the PDF export using the default header and data row heights:

If you set header row height of 50px and data row height of 35px this produces the export below:

Exported row background colors

We have included a third-party color picker in the PDF Export Panel to allow configuring the background colors for odd and even rows in our exported grid.

The default PDF export is using the colors set in the AG Grid Alpine theme as shown below:

Here's an example of customized row background colors in the PDF export:

Adding a Header Image

In addition to exporting AG Grid, you can add other content supported by pdfMake to your PDF export including a header and footer element.

You can add any content to the header and footer - text, images, etc. We illustrate this using a checkbox in the PDF Export Panel to allow adding an image in the header of each exported page. In our demo, the PDF export header contains the AG Grid logo.

Here's the PDF export when exporting with an image in the header:

Here's the PDF export without header content:

As mentioned above, pdfMake lets you provide footer content to your PDF export. In the live sample, we have provided a checkbox in the PDF Export Panel to allow exporting with or without a footer in each exported page. In our example the footer shows the page index and page count.

See the PDF export with a footer showing the page index and page count:

Exporting without a footer:

Setting Page Orientation for export

You can easily control export page orientation. In the live sample, we have provided a pair of radio buttons in the PDF Export Panel to allow configuring the exported file with a 'portrait' or 'landscape' orientation.

See the PDF export with Landscape orientation (default):

See the PDF export with Portrait orientation:

Supported Grid Options

As part of this integration code, we've added support for exporting a number of configurations of AG Grid such as column and row grouping, filtering and sorting. We will cover these in the following sections.

Column Grouping

The AG Grid-pdfMake integration allows you to export AG Grid when using Column Groups. Use the checkbox in the Grid Options Panel to toggle the column definitions between sets with and without column grouping and then export it to PDF.

See the exported grid when not using column grouping:

See the exported grid with column grouping:

Row Grouping

The AG Grid-pdfMake integration allows you to export AG Grid when using Row Grouping. Use the checkbox in the Grid Options Panel to toggle the column definitions between sets with and without row grouping.

See the exported grid without row grouping:

See the exported grid with row grouping:

Filtering and Sorting

Let's now demonstrate the support for filtering and sorting in AG Grid when exporting to PDF. Use the checkboxes in the Grid Options Panel to toggle:

  • Filtering the 'Country' column in our AG Grid instance
  • Sorting the 'Athlete' column in our AG Grid instance

See the exported grid without any filter or sort applied:

See the exported grid with filtering applied:

See the exported grid with sorting applied:

Extending the AG Grid-pdfMake integration

The AG Grid-pdfMake integration code we've built covers a number of AG Grid configurations. However, you may want to modify the default values for font size/color/margins, or provide your own header or footer content. You may want to extend it with your own logic to support a specific scenario.

In order to do this, you need to modify the code in the pdfExport folder of the live sample. It is well-documented and can be easily changed to modify default behavior or extended to support your specific scenario.

For example, you can follow the approach we're using to extend the standard column-based export styling properties stored in pdfExportOptions to add support more properties from the full list supported by pdfMake.

What's next?

We hope this article helps you implement exporting AG Grid to PDF. Remember that you can download the code samples in multiple frameworks and easily reuse the code above to implement PDF export in your project.

If you would like to try out AG Grid check out our getting started guides (JS / React / Angular / Vue)

Happy coding!