Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/johnfactotum/foliate-js/llms.txt

Use this file to discover all available pages before exploring further.

pdf.js is a thin adapter that bridges PDF.js and the foliate-js fixed-layout renderer. It wraps each page of a PDF document as a section in the standard book interface, allowing PDFs to be viewed through the same renderer used for fixed-layout EPUBs and CBZ comic archives. The adapter uses PDFDataRangeTransport so the file is read on demand in chunks, rather than being loaded into memory all at once.
This adapter is experimental and proof-of-concept. It is not production-ready. The API and behaviour may change without notice, and there are known limitations — for example, text selection currently only works correctly in Firefox. Use at your own risk.

​
makePDF(file)

const { makePDF } = await import('./pdf.js')
book = await makePDF(file)
Async function. Accepts a File or Blob containing a PDF document. Returns a Promise that resolves to a book object implementing the standard foliate-js book interface.
​
file
File | Blob
required
The PDF file to open. The adapter uses PDFDataRangeTransport with file.slice() to read ranges on demand without loading the full file into memory.

​
PDF.js dependency

The module imports PDF.js from ./vendor/pdfjs/pdf.mjs at the top of the file: 
import './vendor/pdfjs/pdf.mjs'
const pdfjsLib = globalThis.pdfjsLib
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsPath('pdf.worker.mjs')
PDF.js must be present at vendor/pdfjs/ relative to pdf.js. The adapter also fetches text_layer_builder.css and annotation_layer_builder.css from the same directory to style the rendered text and annotation layers. The character map data and standard font data are served from vendor/pdfjs/cmaps/ and vendor/pdfjs/standard_fonts/ respectively.

​
Page rendering

Each section’s .load() call renders the PDF page into a self-contained HTML blob URL. The rendered page contains three layers:
  1. Canvas layer — the PDF page rasterised at devicePixelRatio × zoom for sharp rendering on high-DPI screens.
  2. Text layer — invisible text elements positioned over the canvas to enable selection and search, built with pdfjsLib.TextLayer.
  3. Annotation layer — interactive annotations (links, etc.) rendered with pdfjsLib.AnnotationLayer.
The section’s .load() method returns an object { src, onZoom } where src is the blob URL and onZoom is a callback the fixed-layout renderer calls with { doc, scale } when the zoom level changes, triggering a re-render of the canvas and layers at the new scale.

​
Returned book object

Property / methodDescription
.sectionsOne section per PDF page (pdf.numPages total). Each section has .id (zero-based page index) and an async .load() that returns { src, onZoom } for the fixed-layout renderer. Results are cached after the first load. Each section reports .size: 1000 (a placeholder, since PDF pages do not have a meaningful byte size for progress tracking).
.tocDerived from the PDF outline (bookmarks). Each item has .label, .href (a JSON-serialised destination), and .subitems. null if the document has no outline.
.metadataExtracted from PDF XMP metadata and the document info dictionary: title, author, contributor, description, language, publisher, subject, identifier, source, and rights.
.rendition{ layout: 'pre-paginated' } — signals to view.js that the fixed-layout renderer should be used.
.resolveHref(href)Async. Parses the JSON-serialised destination, resolves named destinations via pdf.getDestination(), and returns { index } for the target page.
.splitTOCHref(href)Async. Same resolution as resolveHref; returns [pageIndex, null].
.getTOCFragment(doc)Returns doc.documentElement.
.isExternal(uri)Returns true for URIs starting with a scheme (\w+:).
.getCover()Async. Renders page 1 to a canvas and returns the result as a Blob via canvas.toBlob().
.destroy()Calls pdf.destroy() to release PDF.js resources.
view.js detects PDFs by reading the first 5 bytes of the file and checking for the %PDF- magic string (0x25 0x50 0x44 0x46 0x2D). Format detection happens before makePDF is called, so you do not need to inspect the file yourself.

Build docs developers (and LLMs) love

Get started for freeTalk to us