Links

Make links inside documents work, jumping to pages within the document or opening websites safely in a new tab.

Basics

annotationLayer makes link annotations clickable: internal links go to their page and external links open in a new tab.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; export default function Demo() { // Internal links jump to their page; external links open in a new tab. return <PdfViewer source="/samples/links.pdf" annotationLayer />; }

External links open with rel="noopener noreferrer nofollow", so the opened site cannot reach back into your page. Link areas are keyboard-focusable and show a focus outline.

Customization

The focus outline of link areas uses --rpv-accent. Combining links with the text layer keeps text selectable around them.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; import type { CSSProperties } from 'react'; // --rpv-accent colors the keyboard focus outline of link areas. const style = { '--rpv-accent': '#be185d' } as CSSProperties; export default function Demo() { return <PdfViewer source="/samples/links.pdf" annotationLayer textLayer style={style} />; }

See the customization guide.

Advanced / escape hatch

PdfPageCanvas accepts annotationLayer and an onLinkNavigate(page) callback, so custom layouts decide what an internal link does.

Limitations

Only links are interactive. Form fields, comments and other annotations are not rendered as interactive elements. Workaround: none within the viewer; fill forms in a dedicated PDF form tool.
External links always open a new tab. Workaround: none within the viewer. If you need to intercept external navigation, render pages with PdfPageCanvas and handle clicks on the link layer yourself.

API

PdfViewerProps — Props for PdfViewer. Every piece of state supports the value / defaultValue / onChange trio.