By RoleModel Software
PDF.js is awesome, but you will notice this paragraph in their setup instructions:
The viewer is built on the display layer and is the UI for PDF viewer in Firefox and the other browser extensions within the project. It can be a good starting point for building your own viewer. However, we do ask if you plan to embed the viewer in your own site, that it not just be an unmodified version. Please re-skin it or build upon it.
This component aims to be that skin layer built upon PDF.js packaged in a lovely drop-in web component.
A customizable PDF viewer web component built on PDF.js. This component provides a reskinned, embeddable PDF viewing experience with text selection, zoom controls, thumbnail navigation, and theme customization.
yarn add @rolemodel/spider<!doctype html>
<html>
<body>
<rm-pdf-viewer src="/path/to/document.pdf"></rm-pdf-viewer>
</body>
</html><rm-pdf-viewer src="/document.pdf">
<button slot="close-button" onclick="window.location.href='/'">
Back to Home
</button>
</rm-pdf-viewer>| Property | Type | Default | Description |
|---|---|---|---|
src |
String | '' |
Path to the PDF file |
initial-page |
Number | 1 |
Initial page to display |
close-url |
String | '' |
URL to redirect when close button is clicked |
theme-hue |
Number | 217 |
Hue value (0-360) for theme color |
theme-saturation |
Number | 89 |
Saturation value (0-100) for theme color |
| Slot | Description |
|---|---|
close-button |
Custom close button element |
MIT