Document viewer

A PDF drawn page by page with pdf.js, and the passages of a report lit where they sit — found from the PDF's own text positions, one box per line; the page and the quote when the text layer cannot place them.

WebBêtaMédias

Web uniquement — React, depuis @krizaka/ui/document-viewer. Bêta : son API peut encore changer à une version mineure.

Pourquoi il est là. Yomizaka's document page (krizaka/yomizaka#6): the PDF beside Orazaka's findings, a quoted passage lit where it sits.

Quand l’utiliser

To read a document beside what was said about it: findings, comments, extracted fields.
To make a quoted passage visible in the original file instead of in a copy of its text.

Quand ne pas l’utiliser

To play a video or a recording.À la place : Video player
To show an image to crop.À la place : Image cropper
To let the browser open the file as it is: a link to the file is enough.À la place : Button

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { DocumentViewer, locateQuote } from "@krizaka/ui/document-viewer";

Exemples

Findings in the file

A one-page lease and two passages; pick one and the page scrolls to it and lights it.

Loading the document…

Props

A PDF with its passages lit — see the file's header. Client.

Prop	Type	Défaut	Description
`loadPdfjs`requis	`() => Promise<PdfjsModule>`	—	Loads pdf.js: `() => import("pdfjs-dist")`. An optional peer, never in a bundle without a document.
`src`requis	`string \| Uint8Array<ArrayBufferLike>`	—	The PDF: an address (same origin or CORS) or its bytes.
`workerSrc`requis	`string`	—	The address of pdf.js's worker (`new URL("pdfjs-dist/build/pdf.worker.min.mjs", import.meta.url).toString()`).
`activeId`	`string \| null`	`null`	The passage in focus: the viewer scrolls to it.
`highlights`	`readonly DocumentHighlight[]`	`[]`	The passages to light.
`labels`	`Partial<DocumentViewerLabels>`	—	The words of the viewer, translated (English by default).
`onActiveChange`	`((id: string \| null) => void)`	—	A box was clicked (the id) or the focus was released (`null`).
`onLocate`	`((found: Record<string, Located \| null>) => void)`	—	Where each passage was found (`null`: nowhere) — once the text layer is read, and again if `highlights` change.

Accessibilité

The region is named by labels.region; each page is announced by its caption (« Page 2 of 5 »).
The highlight boxes are decorative (aria-hidden): the passages are reached through your list, whose entries scroll to them.
A scanned PDF has no text layer: nothing is lit, and the pages stay readable as images — offer the text alternative yourself.
A passage that cannot be placed is announced in a bar with its quote.

Clavier

Touches	Action
`Tab, arrows, Page Up / Down`	The pages' region is focusable and scrolls like any scrollable area.

Bonnes pratiques

Keep the list of passages in the page, next to the viewer: the viewer is not a keyboard route to each box, your list is (activeId / onActiveChange).
Pass the quote as the text layer reads it and, when you know it, the page: a quote the layout cut is still placed by its opening words, and a page alone still scrolls.
Use onLocate to tell the person what was placed and what was not (« page 3 », « not found in the text layer ») — a passage is never drawn at a guessed place.
Load pdf.js with () => import("pdfjs-dist") and give it a same-origin worker (workerSrc): the engine only reaches pages that show a document.

Générée depuis le code de @krizaka/ui 3.16.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub