pdf.js-controller

This library provide programming friendly usage of mozilla/pdf.js.

• Load pdf and show page
• Display pdf as like presentation
  • Provide controller interface
• Copy text from pdf
• Click-able link in pdf

Installation

npm install @zonuexe/pdf.js-controller

Dependencies

• pdfjs-dist

Usage

Create Presentation Viewer

The ESM bundle exported by @zonuexe/pdf.js-controller expects the host to provide pdfjs-dist (and the viewer helpers) via an import map. Ensure you load both the upstream viewer stylesheet and this package's styles:

<link rel="stylesheet" href="./node_modules/pdfjs-dist/web/pdf_viewer.css">
<link rel="stylesheet" href="./node_modules/@zonuexe/pdf.js-controller/css/pdf-slide.css">
<script type="importmap">
{
  "imports": {
    "@zonuexe/pdf.js-controller": "./vendor/pdfjs-controller.js",
    "pdfjs-dist": "./node_modules/pdfjs-dist/build/pdf.mjs",
    "pdfjs-dist/web/pdf_viewer.mjs": "./node_modules/pdfjs-dist/web/pdf_viewer.mjs"
  }
}
</script>
<script type="module" src="./build.js" defer></script>

Place pdf.worker.mjs and the cmaps/ directory alongside the module bundle (e.g. ./pdf.worker.mjs, ./cmaps/) and pass those URLs through workerSrc / cMapUrl. The default template generated by the controller renders elements using pdf.js standard class names (textLayer, annotationLayer), so the upstream stylesheet applies without additional overrides.

See example/presentation

import PDFController from '@zonuexe/pdf.js-controller';

const container = document.getElementById('pdf-container');
if (!container) throw new Error('Missing #pdf-container');

const controller = new PDFController({
  container,
  workerSrc: new URL('./pdf.worker.mjs', import.meta.url).toString(),
  cMapUrl: new URL('./cmaps/', import.meta.url).toString(),
  cMapPacked: true
});

const pdfUrl = new URL('./example.pdf', import.meta.url).toString();

controller.loadDocument(pdfUrl)
  .then(() => {
    container.addEventListener(PDFController.Events.before_pdf_rendering, () => {
      // before render
    });
    container.addEventListener(PDFController.Events.after_pdf_rendering, () => {
      // after render
    });

    window.addEventListener('resize', () => {
      void controller.fitItSize();
    });

    document.addEventListener('keydown', (event) => {
      if (event.shiftKey || event.ctrlKey || event.metaKey) {
        return;
      }
      const kc = event.keyCode;
      if (kc === 37 || kc === 40 || kc === 75 || kc === 65) {
        event.preventDefault();
        void controller.prevPage();
      } else if (kc === 38 || kc === 39 || kc === 74 || kc === 83) {
        event.preventDefault();
        void controller.nextPage();
      }
    });
  })
  .catch((error) => {
    console.error(error);
  });

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

License

MIT