Skip to content

Composables

usePDF

This package provides a default composable named usePDF that loads and prepare the PDF Document for it usage with VuePDF component, also let you get some basic information and properties about the document.

Keep in mind that usePDF use the same DocumentInitParameter as pdf.js, so you could decide how pdf.js should loads your PDF and then make use of more of pdf.js features that are not supported by VuePDF by default.

vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'

const { pdf, pages, info } = usePDF('sample.pdf')
</script>

<template>
  <VuePDF :pdf="pdf" />
</template>

Reactivity

usePDF is also reactive if you use a ref<src> instead of a plain src, when the value of ref changes the returned values also chage.

vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'

// Changing currentPdf value will change pdf, pages and info values
const currentPdf = ref('sample.pdf')
const { pdf, pages, info } = usePDF(currentPdf)
</script>

<template>
  <VuePDF :pdf="pdf" />
</template>

Parameters

src

Type: string | URL | TypedArray | DocumentInitParameters | ref<string> | ref<URL> | ref<TypedArray> | ref<DocumentInitParameters>
Required: True

This parameter is the same src of pdf.js

js
const { pdf, pages, info } = usePDF('sample.pdf')

options

Type: object

An object with the following properties:

  • onPassword: Callback function to request the document password if no password (or wrong password) was provided.
  • onProgress: Callback function to enable progress monitor.
  • onError: function to handle pdf loading errors
js
function onPassword(updatePassword, reason) {
  console.log(`Reason for callback: ${reason}`)
  updatePassword('password1234')
}

function onProgress({ loaded, total }) {
  console.log(`${loaded / total * 100}% Loaded`)
}

function onError(reason) {
  console.error(`PDF loading error: ${reason}`)
}

const { pdf, pages, info } = usePDF('sample.pdf', {
  onPassword,
  onProgress,
  onError
})

Properties

All values returned by usePDF are shallowRef objects.

pdf

Type: PDFDocumentLoadingTask

Document's loading task, see PDFDocumentLoadingTask for more details.

pages

Type: int

Document's number pages.

info

Type: object

Document's information object.

json
{
  "metadata": {...}, // Metadata object
  "attachments": {...}, // File attachments object
  "javascript": [...], // Array of embedded scripts
  "outline": {...} // Outline objects
}

Document API

You can access to PDFDocumentProxy through pdf's promise property and use its API methods to get more document's info like annotationStorage or use functions like saveDocument, cleanup, etc.

js
const { pdf } = usePDF('document.pdf')

function doSomething() {
  pdf.value.promise.then((doc) => {
    // doc.annotationsStorage
    // doc.saveDocument()
    // doc.cleanup()
    // doc.getData()
    // ...
  })
}

Make your own composable

Using usePDF it's not required, you can use the pdf.js API in the component or build your own composable by yourself. Just need to be sure to send on pdf prop a shallowRef | ref PDFDocumentLoadingTask object.

vue
<script setup>
import { onMounted, ref } from 'vue'
import * as PDFJS from 'pdfjs-dist'

const pdf = ref()

function loadPDF() {
  const loadingTask = PDFJS.getDocument('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
  pdf.value = loadingTask
}

onMounted(() => {
  loadPDF()
})
</script>

<template>
  <div>
    <VuePDF :pdf="pdf" />
  </div>
</template>