It is possible to repeat a header and footer for every page in a React PDF Generator.

Wow, it's great. is working perfectly. But I have one question on my mind. It is possible to click the button; it will generate a pdf and show the same browser.

Hi, Tejas,

Currently, this is blocked on the browser level, and we have no direct option to do it:

https://stackoverflow.com/questions/48420833/open-automatically-a-downloaded-file 

Any solution based on this PDF can be sent as a backend and used in the API.

Hi Tejas,

You can take a look at the following example demonstrating how you can get the PDF as base64. The example also demonstrate how you can load it in a PDFViewer (where you can print it):

• https://codesandbox.io/p/sandbox/pensive-river-29wrmh?file=%2Fapp%2Fmain.tsx

Hope this helps.

Thanks for this example. I am trying this logic in my code, but I am not able to convert it tobase64. Please suggest how I can modify the code I am providing. My link to that type I am implementing a code.

https://stackblitz.com/edit/react-kd4nyh-ceszzg?file=app%2Fmain.jsx

Hi Tejas,

The "k-pdf-export" class will be added only during the export, so the element that you are trying to get reference to in the example does not exist at that point. You can add a class name or an id to the container which you want to export and use it instead:

• https://stackblitz.com/edit/react-kd4nyh-yrbs6o?file=app%2Fmain.jsx

Let me know if everything is working correctly on your side too.

Thank you. Is it working? But unfortunately, I have to render a header and footer on every page, but after this, I converted base64  and checked a pdf viewer, and my header and footer did not show. How can we fix this issue?

https://stackblitz.com/edit/react-kd4nyh-lmbrac?file=app%2Fmain.jsx

Hi Tejas,

Since we are not using the PDFExport, but the "exportPDF" method from the package, you need to pass the page template within the drawDOM method in the object with the options:

• https://codesandbox.io/p/sandbox/frosty-breeze-tg89wt?file=%2Fapp%2Fmain.tsx

More details can be found in the following help article:

• https://www.telerik.com/kendo-react-ui/components/drawing/dom-elements/multi-page-content/#toc-page-templates