pdf-viewer-element

<pdf-viewer>

A web component for displaying PDFs

Install

npm i pdf-viewer-element

Use

<script type="module" src="node_modules/pdf-viewer-element/pdf-viewer.js"></script>
 
<!-- ... -->
 
<pdf-viewer-element src="./my-doc.pdf"></pdf-viewer-element>

Or from a CDN like unpkg.com:

<script type="module" src="https://unpkg.com/pdf-viewer-element?module"></script>
 
<!-- ... -->
 
<pdf-viewer-element src="./my-doc.pdf"></pdf-viewer-element>

Goals

• Simple drop-in PDF viewer with no configuration required
• No build steps required
• Works from a CDN
• Optional configuration for power-users:
  • Exposes most useful pdf.js options
  • Customization via DOM: CSS variables, slots, parts, etc.
• Adapt pdf.js to the DOM: ie, pipe events back through elements

Project Goals

Why make this?

• Learn pdf.js
• Create a useful framework-agnostic element for the web ecosystem
• Gain experience with tricky module, worker, and asynchronous timing issues within web component wrappers
• Convince pdf.js to distribute modules and web components directly?

TODO

• Controls replaceable via <slot>s
• Tests
• Pipe events from pdf.js event-bus into DOM elements
• Options: rotation, auto-size
• Use ResizeObserver for auto-size
• Use IntersectionObserver for laziness