Export PDF for preview instead of downloading

[Rodrigo]

Hi, when clicking to PDF Export button on toolbar, is it possible to open the PDF for preview in a new browser tab instead of downloading it directly to the user hard drive?

Thank you.

[Pavithra Subramaniyam]

Hi Rodrigo,

Yes, you can modify the behavior of the EJ2 Grid PDF export to open the PDF file instead of downloading it directly. By default, the EJ2 Grid's PDF export feature is designed to trigger a file download. However, you can customize this by using the isBlob parameter in the pdfExport method to generate a Blob of the PDF file. Then, you can handle the Blob in the pdfExportComplete event to display the PDF in a new tab.

Here’s how you can achieve this:

1. Set the isBlob parameter to true in the pdfExport method.
2. Use the pdfExportComplete event to capture the Blob and display it in a new tab.

The following example demonstrates how to obtain the blob data of the exported grid by executing the promise in the pdfExportComplete event.

function toolbarClick(args) {

  if (args.item.id === 'Grid_pdfexport') {

    // pass fourth parameter as true to get the blob data of exported grid

    grid.pdfExport(null, null, null, true);

  }

}

 

function pdfExportComplete(args) {

  // execute the promise to get the blob data

  if (args && args.promise) {

    // Execute the promise to get the blob data

    args.promise.then(function (e) {

      exportBlob(e.blobData);

    });

  }

};

 

function exportBlob(blob) {

  var a = document.createElement('a');

  document.body.appendChild(a);

  a.style.display = 'none';

  var url = window.URL.createObjectURL(blob); // Fix typo here

  a.rel='nofollow' href = url;

  a.download = 'Export';

  a.click();

  window.URL.revokeObjectURL(url); // Fix typo here

  document.body.removeChild(a);

}

 

Please get back to us if you need further assistance on this.

Regards,

Pavithra S

[Rodrigo]

Hi Pavithra, thank you for your quick response.

Works great, just made a little change to PdfExportComplete() function:

if (args && args.promise) {
    args.promise.then(function (e) {
        var fileURL = URL.createObjectURL(e.blobData);
        window.open(fileURL);
    });
}

Everything else worked great. Thank you.

[Aishwarya Rameshbabu]

Hi Rodrigo,

We are happy to hear that the provided solution was helpful. Please get back to us if you need any other assistance.

Regards

Aishwarya R