Skip to main content
Render PDFs in SuperDoc. The PDF viewer is configured through modules.pdf.

​
Install pdf.js

Install pdfjs-dist in your app: 
npm i pdfjs-dist
Supported versions: >= 5.4.296.

​
Quick start

import { SuperDoc } from 'superdoc';
import * as pdfjsLib from 'pdfjs-dist/build/pdf.mjs';

const pathToWorker = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString(); // example in Vite

const superdoc = new SuperDoc({
  selector: '#viewer',
  document: fileBlob,
  modules: {
    pdf: {
      pdfLib: pdfjsLib, // required
      setWorker: true, // auto-configure worker
      workerSrc: pathToWorker, // path to worker (falls back to CDN if omitted)
    },
  },
  onPdfDocumentReady: () => {
    console.log('PDF ready');
  },
});
This is the recommended approach because the worker is configured once for the whole application. 
import * as pdfjsLib from 'pdfjs-dist/build/pdf.mjs';

pdfjsLib.GlobalWorkerOptions.workerSrc =
  new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
Then disable auto-setup: 
modules: {
  pdf: {
    pdfLib: pdfjsLib,
    setWorker: false,
  },
}

​
Configuration

​
modules.pdf.pdfLib
Object
required
Preloaded pdf.js library instance
​
modules.pdf.workerSrc
string
PDF.js worker source URL (falls back to CDN when omitted)
​
modules.pdf.setWorker
boolean
default:"false"
Whether to auto-configure pdf.js worker
​
modules.pdf.textLayer
boolean
default:"false"
Enable text layer rendering (for text selection)
​
modules.pdf.outputScale
number
default:"2"
Canvas render scale (quality)

​
Events

​
pdf:document-ready

Fired when all PDF pages are rendered. 
superdoc.on('pdf:document-ready', () => {
  console.log('PDF ready');
});

​
Notes

  • outputScale affects render quality; zooming does not re-render the canvas.
  • If you need text selection, enable textLayer: true.