Text layer

Overlay real, selectable text on each page so users can copy it and screen readers can read the document.

Basics

textLayer places invisible, selectable text over each rendered page.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; export default function Demo() { // Select text on the page and copy it. return <PdfViewer source="/samples/multipage.pdf" textLayer />; }

With a text layer, each page is exposed to assistive technology as a group containing its text instead of a single image, so screen readers can read the document. Browser find (Ctrl/⌘ + F outside the viewer) finds text on rendered pages too.

Search turns the text layer on automatically.

Customization

The selection color is --rpv-selection-bg.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; import type { CSSProperties } from 'react'; const style = { '--rpv-selection-bg': 'rgba(16, 185, 129, 0.35)' } as CSSProperties; export default function Demo() { return <PdfViewer source="/samples/non-embedded-fonts.pdf" textLayer style={style} />; }

See the customization guide.

Advanced / escape hatch

PdfPageCanvas accepts textLayer for custom layouts, and getDocument() on the imperative API gives access to PDF.js getTextContent() for extracting text without rendering.

Limitations

Scanned documents have no text. Pages that are images contain no text to select. Workaround: run OCR on the server and serve a PDF with a text layer.
Selection can be imprecise with unusual fonts. Text is positioned from the PDF’s font metrics, so some fonts select slightly off the visible glyphs. Workaround: none within the viewer.
Adds work per page. Building the text layer costs extra time on text-heavy pages. Workaround: leave it off when users only need to look at the document.

API

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