Adding page numbers to pdf generated from html

[speedDaemonAmber]

I have read and understood the contribution guidelines.

I am trying to find a way to display page numbers within the header of my pdf, which is generated from a react component , as shown below.

        const pdf = new jsPDF('p', 'pt', 'a4');

        let data = await ReactDOMServer.renderToString(<PrintStatement />);

        pdf.html(data, {
            callback: function (pdf) {
                pdf.save(filename)
            }
        });

This component contains a header, as shown below. In previous versions you could add a span with class='pageCounter' and a page number would be displayed in that span. This does not seem to be working in the latest version. I have also tried putting it in the footer, but it will not display there either. Is there a way to accomplish this in the latest version?

		<header className='pdf-header'>
			<p className='date'>{currentDate}</p>
			<p className='title'>Ledger Report - Current Transactions</p>
			<p className='page'>Page <span className='pageCounter'></span></p>
		</header>

An example of the resulting pdf is attached.

PaymentHistory.pdf

[KasiMaru]

Sorry to bother, but have you found a solution, @speedDaemonAmber?

[speedDaemonAmber]

Sorry to bother, but have you found a solution, @speedDaemonAmber?

Unfortunately, I have not. I just decided to go without the page number in the header.

I believe this is possible using react-pdf, but I haven't gotten around to trying it yet.

[speedDaemonAmber]

Sorry to bother, but have you found a solution, @speedDaemonAmber?

I wanted to follow up on this. I was able to get this working with @react-pdf/renderer. I tried using this before, but it wasn't compatible with my outdated project. Once I updated node, react and all other packages I was able to get this working perfectly. Unfortunately, it does take quite a bit of work to refactor the existing components.

[navinrangar]

I did it in footer. Just adjust the co-ordinates to put it to the header.

 for (let i = 0; i < totalPageCount; i++) {
        pdf.setPage(i);
        let currentPage = **(pdf as any).internal.getCurrentPageInfo().pageNumber;**
        pdf.text(`Page ${currentPage} of ${totalPageCount}`, **pdf.internal.pageSize.width - 60, pdf.internal.pageSize.height - 10**);
      };

[github-actions]

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.