holtwick / vue3-pdfjs

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

DEMO

Install

npm i vue3-pdfjs
or
yarn add vue3-pdfjs

Usage

Demo code can be found under the docs section here.

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')

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 - mozilla/pdf.js#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')
    const numOfPages = ref(0)

    onMounted(() => {
      const loadingTask = createLoadingTask(pdfSrc.value)
      loadingTask.promise.then((pdf: PDFDocumentProxy) => {
        numOfPages.value = pdf.numPages
      })
    })
    return {
      pdfSrc,
      numOfPages
    }
  }
});
</script>

<template>
  <VuePdf v-for="page in numOfPages" :key="page" :src="pdfSrc" :page="page" />
</template>