@boooooob/vue3-pdfjs

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

Install

npm i vue3-pdfjs
or
yarn add vue3-pdfjs

Usage

Import globally

import { createApp } from 'vue'
import App from './App.vue'
import VuePdf from '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;
  // Whether to enable text selection
  enableTextSelection?: boolean;
  // Whether to enable annotations (clickable links)
  enableAnnotations?: boolean;
  // page wrapper id prefix, default is `vue-pdf-page`
  wrapperIdPrefix?: string;
}

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, onMounted, reactive, ref } from 'vue';
import { VuePdf, createLoadingTask } from 'vue3-pdfjs/esm';
import { VuePdfPropsType } from 'vue3-pdfjs/components/vue-pdf/vue-pdf-props'; // Prop type definitions can also be imported
import { PDFDocumentProxy } from 'pdfjs-dist/types/src/display/api';


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>