@boooooob/vue3-pdfjs

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

Install

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

Usage

Import globally

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

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

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

<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<VuePdfPropsType['src']>('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')

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

<template>
  <VuePdf :src="pdfSrc" all-pages />
</template>