Document

Document.Root loads a PDF and provides a PdfDocument to everything inside. src is reactive: changing it cancels the previous load and destroys the old document.

Anatomy

<Document.Root {src}>
	<Document.Loading />  <!-- while loading: progress -->
	<Document.Error />    <!-- on failure: the error -->
	<Document.Password /> <!-- for protected PDFs -->
	<Viewer.Root>…</Viewer.Root>
</Document.Root>

<Document.Root {src}>
	<Document.Loading />  <!-- while loading: progress -->
	<Document.Error />    <!-- on failure: the error -->
	<Document.Password /> <!-- for protected PDFs -->
	<Viewer.Root>…</Viewer.Root>
</Document.Root>

Usage

Sources: a URL string or URL, an ArrayBuffer/Uint8Array, a Blob/File, { url, httpHeaders, withCredentials }, or an already-loaded pdf.js document.
States: document.status is idle · loading · password · ready · error; error.kind is invalid, missing, network, password or unknown.
Utilities on the state: getPage(n), getPageText(n), getProperties() (metadata, paper size, file size), download(name?, bytes?), print(bytes?), fingerprint (a stable key for saving notes).

<Document.Root src={file} onLoad={(doc) => console.log(doc.numPages)}>
	{#snippet children({ status, progress, numPages })}
		<p>{status} · {numPages} pages</p>
	{/snippet}
</Document.Root>

<Document.Root src={file} onLoad={(doc) => console.log(doc.numPages)}>
	{#snippet children({ status, progress, numPages })}
		<p>{status} · {numPages} pages</p>
	{/snippet}
</Document.Root>

API reference

`Document.Root`

A provider: renders no element of its own.

Prop	Type	Default
`src` required URL, bytes, File/Blob, `{url, httpHeaders}` or a pdf.js document. Reactive.	`PdfSource \| null \| undefined`	—
`password` Password to try first.	`string`	—
`documentOptions` Extra pdf.js `getDocument()` options.	`Record<string, unknown>`	—
`document` bindable The loaded document state (bind:document to read it outside).	`PdfDocument`	—
`onLoad`	`(doc: PDFDocumentProxy) => void`	—
`onError`	`(error: PdfLoadError) => void`	—

`Document.Loading`

Renders a <div> (or your element via child) and accepts its HTML attributes.

No props of its own besides ref, child and children.

Snippet prop	Type
`progress`	`number`

Data attributes data-pdf-loading

`Document.Error`

Renders a <div> (or your element via child) and accepts its HTML attributes.

No props of its own besides ref, child and children.

Snippet prop	Type
`error`	`PdfLoadError`

Data attributes data-kinddata-pdf-error

`Document.Password`

Renders a <form> (or your element via child) and accepts its HTML attributes.

No props of its own besides ref, child and children.

Snippet prop	Type
`reason`	`PasswordReason`
`submit`	`(password: string) => void`

Data attributes data-pdf-passworddata-reason