Document sources

Open PDFs from a URL, a File the user picked, or bytes you already have, without uploading anything.

source accepts everything a web app usually has at hand when it wants to show a PDF:

a URL string or URL object, fetched by the viewer;
a File or Blob, for example from a file input or drag and drop;
an ArrayBuffer or Uint8Array you fetched, generated or decrypted yourself.

Basics

Pass a URL and the viewer fetches, parses and renders the document.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; export default function Demo() { return <PdfViewer source="/samples/letter-3pages.pdf" />; }

null, undefined and an empty string show the empty state. Changing source aborts the previous request and destroys the previous document, so switching documents quickly never shows a stale page.

Local files

A File is read in the browser and never leaves the user’s device.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; import { useState } from 'react'; export default function Demo() { // Keep binary sources in state: they compare by identity. const [file, setFile] = useState<File | null>(null); return ( <> <p className="demo-controls"> <label> Choose a PDF{' '} <input type="file" accept="application/pdf" onChange={(event) => setFile(event.target.files?.[0] ?? null)} /> </label> </p> <PdfViewer source={file} /> </> ); }

Bytes

ArrayBuffer and Uint8Array sources are copied before PDF.js takes ownership of them, so the buffer you pass stays usable afterwards.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; import { useEffect, useState } from 'react'; export default function Demo() { const [bytes, setBytes] = useState<ArrayBuffer | null>(null); useEffect(() => { // Bytes you already have: fetched by your own code, generated or decrypted. fetch('/samples/mixed-sizes.pdf') .then((response) => response.arrayBuffer()) .then(setBytes); }, []); // The viewer copies the bytes, so `bytes` stays usable afterwards. return <PdfViewer source={bytes} fileName="mixed-sizes.pdf" />; }

Download file name

The download button uses fileName when you pass one; otherwise a File’s own name, then the last .pdf segment of the URL, then document.pdf. See Download.

Customization

renderEmpty replaces the view shown while there is no document, for example with a call to action.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; export default function Demo() { return ( <PdfViewer source={null} renderEmpty={() => ( <div role="status" style={{ padding: 32, textAlign: 'center' }}> <strong>No report selected</strong> <p>Pick a report from the list to preview it here.</p> </div> )} /> ); }

The loading and error views have their own slots; see Loading states, Error states and the customization guide.

Advanced / escape hatch

To load documents without the viewer, for example to count pages or render thumbnails in your own layout, use usePdfDocument directly. It accepts the same sources and request options.

Limitations

Cross-origin URLs need CORS. The browser blocks reading a PDF from another origin unless the server sends Access-Control-Allow-Origin. The viewer reports a NETWORK_ERROR. Workaround: enable CORS on the server, or proxy the file through your own origin. See Authenticated requests.
Large files are loaded in full. URL sources are fetched completely before rendering starts (range requests are not used), so a very large PDF takes as long as its download. Workaround: split huge documents server-side, or show your own progress UI with renderLoading.
Streams are not accepted. A ReadableStream is not a PdfSource. Workaround: read it into a Blob or ArrayBuffer first (await new Response(stream).blob()).

API

PdfViewer — A PDF viewer: one page at a time with a toolbar for zoom, navigation, fullscreen, rotation, download and print.
PdfSource — A PDF document source: a URL for the viewer to fetch, or a file or bytes that are already in memory.