Clickable image in pdf export of ej2 angular grid

[Mario Falana]

Hello,

I'm looking for a way to integrate a clickable button in the exported pdf. I was able to add a custom header and footer to the exported pdf. But I wonder if it is possible to add a button and make it clickable, the image would redirect to a specific page on our website.

Also, it would be interesting to make our logo in the header clickable but I couldn't find any type to pass to the header nor footer that fits this use case.

Alternatively, I was thinking to add an extra row to the data visible only on the pdf export and play with the styling to display it without borders making it look like it belongs to the pdf but not the data grid. If this is a possibility, is it possible to combine this using templates args.image and args.hyperLink ?

What is the best recommended approach to achieve clickable images?

Thank you in advance for your help.

Mario.

[Jeyalakshmi Thangamarippandian]

Hi ,

Currently, we do not have support for adding link annotations within the header and footer templates of PDF documents in the ej2-pdf-export library.

However, we can achieve the same functionality using an alternate approach by directly drawing the header/footer content on the page graphics instead of adding it as a template. We can add a URI annotation on the bounds of the image in the PDF header, which allows us to navigate to a specific URL upon clicking. Additionally, we can layout the grid to paginate while considering the height of the custom page header using the PdfGridLayoutFormat API.

Please find a sample at https://stackblitz.com/edit/typescript-qkqktw?file=package.json,index.ts

With Regards,

Jeyalakshmi T

[Mario Falana]

Hi,

Thank you for the informations. I actually wanted to do this with PdfExportService of the angular grid component. But I guess the library ej2-pdf-export allows for more granular control over the exported pdf.

I successfully implemented the required layout thanks to your sample.

Where can I find ej2-pdf-export documentation ? Searching for it I always find references to PdfExportService of the grid component and not a dedicated documentation page related to ej2-pdf-export.

Thank you for your answer.

[Jeyalakshmi Thangamarippandian]

Hi Mario Falana,

 

Yes, we can achieve this by adding a URI annotation to the image bounds. You can find a StackBlitz sample demonstrating this at the following link: StackBlitz Sample.

 

In this sample, we have added an image to a custom header and placed a URI annotation on the image bounds. As a result, when you click on the image in the generated PDF, it will navigate to the specified webpage.

 

Please let us know if you need further assistance in this.

 

With regards,

Jeyalakshmi T