examples icon indicating copy to clipboard operation
examples copied to clipboard

When using renderPage for the watermark, links/hyperlinks do not work.

Open rishav1710 opened this issue 6 months ago • 0 comments
trafficstars

When I pass my custom renderPage to the viewer, all my links are rendered as span tags, whereas if I don't use renderPage, all my links are rendered as anchor tags.

CASE -> CUSTOM RENDER PAGE

const renderPage: RenderPage = (enterFullScreenProps: RenderPageProps) => (
  <>
    {enterFullScreenProps.canvasLayer.children}
    {enterFullScreenProps.annotationLayer.children}
    {(props.contentFor === 'ENTERPRISE' || props.contentFor === 'SKILLS') &&
      props.watermarkDetailsData.watermarkType === 'TEXT_WATERMARK' && (
        <div>
        // my watermark code
      )}
    {enterFullScreenProps.textLayer.children}
  </>
);

 <Viewer
 //other props
 renderPage={renderPage}
 />
Image

CASE -> WITHOUT CUSTOM RENDER PAGE

 <Viewer
 //other props
 />
Image

In the official documentation for adding a watermark, the sample PDF provided also contains links that are not clickable. Refer here: https://react-pdf-viewer.dev/examples/add-a-watermark/

Is there any way to enable both the links and the watermark together?

rishav1710 avatar May 07 '25 13:05 rishav1710