New to KendoReact? Start a free 30-day trial

Exporting PDF from KendoReact Data Grid and Opening in a New Tab

Updated on Oct 31, 2025

Environment

Product	KendoReact Data Grid, KendoReact PDF Processing
Version	Current

I want to export the results of the KendoReact Data Grid to a PDF and open the PDF in a new tab. I do not want the PDF file to be downloaded. The save() method of the PDF Grid is void, so I cannot obtain the blob directly from the return.

This knowledge base article also answers the following questions:

How to export KendoReact Data Grid to PDF without downloading?
How to open exported PDF in a new browser tab?
How to use KendoReact PDF Processing for custom PDF export?

Solution

To achieve this behavior, use the KendoReact PDF Processing component to create the PDF. Then, pass the base64 string of the created PDF to a dynamically created iframe in a new tab. Follow these steps:

Use the drawDOM function from the PDF Processing component to render the grid as a PDF.
Pass the rendered content to the exportPDF function to generate a PDF data URI.
Open a new browser tab using window.open('about:blank').
Create an iframe dynamically in the new tab.
Set the src attribute of the iframe to the generated PDF data URI.

Here is an example implementation:

tsx

  const exportPDFWithMethod = () => {
    let gridElement = document.querySelector('.k-grid') as any;
    drawDOM(gridElement, { paperSize: 'A4' })
      .then((group) => {
        return exportPDF(group);
      })
      .then((dataUri) => {
        console.log(dataUri.split(';base64,')[1]);

        var w = window.open('about:blank');

        setTimeout(function () {
          let iframe = w.document.body.appendChild(
            w.document.createElement('iframe')
          );
          iframe.src = dataUri;
          iframe.width = '100%';
          iframe.height = '100%';
        }, 0);
      });

Change Theme

Theme

Loading ...

Exporting PDF from KendoReact Data Grid and Opening in a New Tab

Environment

Description

Solution

See Also