pdfjs-vue3

A experimental Vue 3 component for displaying PDFs using pdfjs.

Installation

Install the package and its peer dependencies:

npm install pdfjs-vue3 pdfjs-dist

Setup

Copy the PDF.js Worker Script

The PDF.js library requires a worker script to render PDFs. You need to copy it from pdfjs-dist into your app's public/static folder so it can be served at runtime.

For example, copy it into public/js/pdfjs/:

# unix/mac
cp node_modules/pdfjs-dist/build/pdf.worker.min.mjs public/js/pdfjs/

# windows
copy node_modules\pdfjs-dist\build\pdf.worker.min.mjs public\js\pdfjs\

You can choose any path under your public folder — just remember the URL for the next step.

Import Styles

Import the component styles in your app entry or root component:

import 'pdfjs-vue3/dist/pdfjs-vue3.css'

Usage

Basic Example

<script setup lang="ts">
import { ref } from 'vue'
import { PdfHost, ZoomType } from 'pdfjs-vue3'

const zoomType = ref(ZoomType.Auto)
const zoom = ref(1)
const files = ['/samples/my-document.pdf']
</script>

<template>
  <PdfHost
    worker-src="/js/pdfjs/pdf.worker.min.mjs"
    :sources="files"
    v-model:zoom-type="zoomType"
    v-model:zoom="zoom"
    style="height: 100vh;"
  />
</template>

PdfHost Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | workerSrc | string | — | URL to the pdfjs worker script. Must be set if not configured elsewhere. | | sources | PdfSource[] | — | Array of PDF sources to display. Each source can be a URL string, URL, TypedArray, ArrayBuffer, or a pdfjs DocumentInitParameters object. | | sourceKey | (source: PdfSource, index: number) => string \| number | — | Optional key generator for source identity in rendering. Use this when sources may contain duplicate values. | | zoomType | ZoomType | ZoomType.Auto | Type of zoom behavior. | | zoom | number | 1 | Custom zoom percentage (1 = 100%). Used when zoomType is Custom. | | hideText | boolean | false | Hides the selectable text layer. | | hideNumber | boolean | false | Hides the page number display. |

PdfHost Events

| Event | Payload | Description | |------|---------|-------------| | update:zoom | number | Emitted when zoom changes. | | update:zoomType | ZoomType | Emitted when zoom mode changes. | | error | { source: PdfSource, error: unknown } | Emitted when loading a source fails. |

ZoomType Enum

| Value | Description | |-------|-------------| | Auto | Fits width up to a certain limit. | | WidthFit | Fits width of the host with no limit. | | PageFit | Fits the whole page in the host. | | Custom | Uses the zoom prop value. |

Exposed Methods

The PdfHost component exposes zoomIn() and zoomOut() methods via template ref:

<script setup lang="ts">
import { ref } from 'vue'
import { PdfHost } from 'pdfjs-vue3'

const host = ref()
</script>

<template>
  <button @click="host.zoomIn()">+</button>
  <button @click="host.zoomOut()">-</button>
  <PdfHost ref="host" worker-src="/js/pdfjs/pdf.worker.min.mjs" :sources="['/doc.pdf']" />
</template>

Page Slot

Use the #page slot to render custom overlays on each page:

<PdfHost worker-src="/js/pdfjs/pdf.worker.min.mjs" :sources="files">
  <template #page="{ page, displaySize }">
    <div>Page {{ page.pageNumber }} — {{ displaySize.width }}×{{ displaySize.height }}</div>
  </template>
</PdfHost>

License

Apache-2.0