# @xianjianlf2/vue-pdf-viewer

> A vue3 component for pdf viewer

Latest version **0.1.3** (published 2023-08-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install @xianjianlf2/vue-pdf-viewer
pnpm add @xianjianlf2/vue-pdf-viewer
yarn add @xianjianlf2/vue-pdf-viewer
bun add @xianjianlf2/vue-pdf-viewer
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2023-08-30 |
| First published | 2023-07-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 6.3 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | xianjianlf2 |
| Maintainers | xianjianlf2 |
| Keywords | vue3, pdf viewer, pdfjs |

## Links

- npm: https://www.npmjs.com/package/@xianjianlf2/vue-pdf-viewer
- Repository: https://github.com/xianjianlf2/vue3-pdf-viewer
- Homepage: https://github.com/xianjianlf2/vue3-pdf-viewer#readme
- Issues: https://github.com/xianjianlf2/vue3-pdf-viewer/issues
- npm.io page: https://npm.io/package/@xianjianlf2/vue-pdf-viewer

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^3.3.4
- [pdfjs-dist](https://npm.io/package/pdfjs-dist.md) ^3.8.162
- [vue-virtual-scroller](https://npm.io/package/vue-virtual-scroller.md) 2.0.0-beta.8
- [@xianjianlf2/vue-pdf-viewer](https://npm.io/package/@xianjianlf2/vue-pdf-viewer.md) link:dist

## 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.3 (latest) — 2023-08-30
- 0.1.2 — 2023-08-04
- 0.1.1 — 2023-08-01
- 0.0.11 — 2023-07-22
- 0.0.8 — 2023-07-21
- 0.0.7 — 2023-07-21
- 0.0.6 — 2023-07-21
- 0.0.5 — 2023-07-21
- 0.0.3 — 2023-07-21
- 0.0.2 — 2023-07-21
- 0.0.1 — 2023-07-21

## README

## @xianjianlf2/vue-pdf-view

@xianjianlf2/vue-pdf-view is a npm library built on Pdf js, using the latest vite + vue3 + tailwind technologies. It supports virtual scrolling for smooth navigation in large PDF files and implements most features of pdf js, making it an ideal choice for handling PDF files in web applications.

![](https://img.shields.io/badge/version-0.1.2-blue)

### Additional features are being updated on an ongoing basis

## Feature

- [x] Jump To Page
- [x] Prev Page / Next Page
- [x] zoom in  / zoom out
- [x] find text (PdfViewerSearch Component)
- [ ] side bar
- [ ] print
- [ ] password
- [ ] annotation

## usage


```vue
<script setup lang="ts">
import { ref } from 'vue'
import type { PdfViewInstance } from '@xianjianlf2/vue-pdf-viewer'
import { PdfViewer } from '@xianjianlf2/vue-pdf-viewer'
import pdfUrl from './assets/pdf/922_towards_understanding_why_mask.pdf?url'
import '@xianjianlf2/vue-pdf-viewer/dist/style.css'

const showAllPage = ref(true)
const pdfViewerRef = ref<PdfViewInstance>()
// if use customer toolbar, it can get latest page num
function handleRendered() {
  pdfViewerRef.value?.getCurrenPageNum()
}
/**
 * @description:
 * @param {showAllPage} {boolean}
 * @param {pdfUrl} {string}
 * @param {scale} {number} (optional)
 * @param {scaleStep} {number} (optional)
 * @param {maxScale} {number} (optional)
 * @param {minScale} {number} (optional)
 * @param {showToolbar} {boolean} (optional)
 *
 * event:
 * @onProgress {function} (optional) (loadFileProcess: number)
 *
 * ref: PDFViewerRef.value.xxx
 * @params {jumpToPage} {function} (optional) (page: number)
 * @params {prevPage} {function} (optional)
 * @params {nextPage} {function} (optional)
 * @params {zoomIn} {function} (optional)
 * @params {zoomOut} {function} (optional)
 * @params {getCurrenPageNum} {function} (optional)
 * @params {getScale} {function} (optional)
 * @params {getTotalPageNum} {function} (optional)
 *
 */
</script>

<template>
  <div class="h-screen">
    <PdfViewer ref="pdfViewerRef" v-model:showAllPage="showAllPage" :src="pdfUrl" @rendered="handleRendered" />
  </div>
</template>

<style scoped></style>
```

## PdfViewerSearch

```vue
<script setup lang="ts">
import { PdfViewerSearch } from '@xianjianlf2/vue-pdf-viewer'
import type { PdfViewerSearchConfig } from '@xianjianlf2/vue-pdf-viewer'
import '@xianjianlf2/vue-pdf-viewer/style.css'

// your document file
import pdfUrl from './assets/pdf/922_towards_understanding_why_mask.pdf?url'

const pdfViewerSearchConfig: PdfViewerSearchConfig = {
  scale: {
    maxScale: 3.0,
    minScale: 0.5,
    scaleStep: 0.5,
  },
  backgroundColor: '#808080',
  singlePageMode: false,
  enableSearchBox: true,
  enableToolbar: true,
}
</script>

<template>
  <div class="h-screen">
    <PdfViewerSearch :src="pdfUrl" :config="pdfViewerSearchConfig" />
  </div>
</template>

<style scoped></style>
```

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