# @boooooob/vue3-pdfjs

> PDF Reader for Vue 3 using Mozilla's PDF.js

Latest version **1.0.4** (published 2022-09-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @boooooob/vue3-pdfjs
pnpm add @boooooob/vue3-pdfjs
yarn add @boooooob/vue3-pdfjs
bun add @boooooob/vue3-pdfjs
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2022-09-15 |
| First published | 2022-08-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10.0.0 |
| Dependencies | 2 |
| Unpacked size | 328.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Randolph Tellis |
| Maintainers | boooooob |
| Keywords | vue 3 pdf viewer, vue 3 pdfjs, vue 3 mozilla pdfjs, vue 3 pdf component |

## Links

- npm: https://www.npmjs.com/package/@boooooob/vue3-pdfjs
- Repository: https://github.com/bobjiang1988/vue3-pdfjs
- Homepage: https://github.com/bobjiang1988/vue3-pdfjs#readme
- Issues: https://github.com/bobjiang1988/vue3-pdfjs/issues
- npm.io page: https://npm.io/package/@boooooob/vue3-pdfjs

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.2.37
- [pdfjs-dist](https://npm.io/package/pdfjs-dist.md) 2.10.377

## Recent versions

- 1.0.4 (latest) — 2022-09-15
- 1.0.3 — 2022-08-25
- 1.0.2 — 2022-08-25
- 1.0.1 — 2022-08-25
- 1.0.0 — 2022-08-25
- 0.1.12 — 2022-08-23
- 0.1.11 — 2022-08-20
- 0.1.10 — 2022-08-18
- 0.1.9 — 2022-08-18
- 0.1.8 — 2022-08-18
- 0.1.7 — 2022-08-18
- 0.1.6 — 2022-08-18

## README

<div align="center">

![vue supported version](https://img.shields.io/badge/vue-3.x-brightgreen) [![npm](https://img.shields.io/npm/v/@boooooob/vue3-pdfjs)](https://www.npmjs.com/package/@boooooob/vue3-pdfjs/v/latest) [![NPM](https://img.shields.io/npm/l/@boooooob/vue3-pdfjs)](https://github.com/bobjiang1988/vue3-pdfjs/blob/main/LICENSE.md)

</div>

Forked from `https://github.com/randolphtellis/vue3-pdfjs` and enhanced a little.


## Install

```bash
npm i @boooooob/vue3-pdfjs
or
yarn add @boooooob/vue3-pdfjs
```

## Usage

### Import globally
```ts
import { createApp } from 'vue'
import App from './App.vue'
import VuePdf from '@boooooob/vue3-pdfjs'

const app = createApp(App)
app.use(VuePdf)
app.mount('#app')
```

### Props

```ts
export interface VuePdfPropsType {
  // The source of the pdf. Accepts the following types `string | URL | Uint8Array | PDFDataRangeTransport | DocumentInitParameters`
  src: string | URL | Uint8Array | PDFDataRangeTransport | DocumentInitParameters;
  // The page number of the pdf to display.
  page?: number;
  // Whether to display all pages. Ignore the prop `page` if true
  allPages?: boolean;
  // The scale (zoom) of the pdf. Setting this will also disable auto scaling and resizing. 
  scale?: number;
  // page wrapper id prefix, default is `vue-pdf-page`
  wrapperIdPrefix?: string;
}

```

### Events

```ts

emit('progress', 0);
emit('pdfLoaded', pdf);
emit('totalPages', pdf.numPages);
emit('pageLoaded', page);

```


### Basic Example

Import components from the `esm` folder to enable tree shaking.
Please note that Mozilla's pdfjs npm package does not export tree-shakeable ES modules. Info here - https://github.com/mozilla/pdf.js/issues/12900
```ts
<template>
  <VuePdf :src="pdfSrc" all-pages />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import VuePdf from '@boooooob/vue3-pdfjs'

export default defineComponent({
  name: 'Home',
  components: { VuePdf },
  setup() {
    const pdfSrc = ref('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')

    return {
      pdfSrc
    }
  }
});
</script>

```

---
_Source: https://npm.io/package/@boooooob/vue3-pdfjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._