# pdf-viewer-element

> A web component for displaying PDFs

Latest version **0.1.0-pre.4** (published 2020-09-05) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install pdf-viewer-element
pnpm add pdf-viewer-element
yarn add pdf-viewer-element
bun add pdf-viewer-element
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0-pre.4 |
| Published | 2020-09-05 |
| First published | 2019-09-01 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 795.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 50 |
| Author | Justin Fagnani |
| Maintainers | justinfagnani |
| Keywords | pdf |

## Links

- npm: https://www.npmjs.com/package/pdf-viewer-element
- Repository: https://github.com/justinfagnani/pdf-viewer-element
- Homepage: https://github.com/justinfagnani/pdf-viewer-element#readme
- Issues: https://github.com/justinfagnani/pdf-viewer-element/issues
- npm.io page: https://npm.io/package/pdf-viewer-element

## Dependencies (4)

- [lit-element](https://npm.io/package/lit-element.md) ^2.4.0
- [@material/mwc-fab](https://npm.io/package/@material/mwc-fab.md) ^0.8.0
- [@material/mwc-icon-button](https://npm.io/package/@material/mwc-icon-button.md) ^0.12.0
- [@bundled-es-modules/pdfjs-dist](https://npm.io/package/@bundled-es-modules/pdfjs-dist.md) ^2.1.266

## Alternatives

- [@cantoo/pdf-lib](https://npm.io/package/@cantoo/pdf-lib.md) — 297.9K weekly downloads
- [datatables.net-buttons](https://npm.io/package/datatables.net-buttons.md) — 200.1K weekly downloads
- [@ckeditor/ckeditor5-export-pdf](https://npm.io/package/@ckeditor/ckeditor5-export-pdf.md) — 167.0K weekly downloads
- [scanbot-web-sdk](https://npm.io/package/scanbot-web-sdk.md) — 15.0K weekly downloads
- [@syncfusion/ej2-angular-pdfviewer](https://npm.io/package/@syncfusion/ej2-angular-pdfviewer.md) — 8.8K weekly downloads

## Recent versions

- 0.1.0-pre.4 (latest) — 2020-09-05
- 0.1.0-pre.3 — 2020-01-12
- 0.1.0-pre.2 — 2019-09-02
- 0.1.0-pre.1 — 2019-09-01

## README

# `<pdf-viewer>`

A web component for displaying PDFs

## Install

```sh
npm i pdf-viewer-element
```

## Use

```html
<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:

```html
<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

---
_Source: https://npm.io/package/pdf-viewer-element · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._