Skip to content

PDF Viewer

Open and View PDF Document

Usage

Simple Usage

preview
vue
<template>
  <p-pdf-viewer :src="FILE" />
</template>

<script setup>
  import FILE from '~/assets/Calibrator-v3.pdf'
</script>
preview
vue
<template>
  <p-pdf-viewer :src="FILE">
    <template #header>
      <p-navbar>
        <p-navbar-brand>
          <img src="../../public/assets/images/icon-privy.svg" />
        </p-navbar-brand>
        <p-navbar-nav>
          <p-nav-item active>Label</p-nav-item>
          <p-nav-item>Label</p-nav-item>
          <p-nav-item>Label</p-nav-item>
        </p-navbar-nav>
      </p-navbar>
    </template>
    <template #footer>
      <div class="p-4 text-center">
        <p-button color="primary">
          Action Button
        </p-button>
      </div>
    </template>
  </p-pdf-viewer>
</template>

Handle Document with Password

If your document is require a password to open, you can pass the password to prop password.

preview
vue
<template>
  <p-form-group
    label="Password"
    description="The password is: 123456">
    <p-input-password
      v-model="password" />
  </p-form-group>
  <p-pdf-viewer
    :src="FILE_PROTECT"
    :password="password" />
</template>

<script setup>
  import FILE_PROTECT from '~/assets/Calibrator-v3_protected.pdf?url'

  const password = ref('')
</script>

Layout Fit Mode

Set layout prop to fit to enable layout fit mode. It will adapt the viewer height with viewport, best for combining with PDFObject.

fixed-vs-fit-ilustration

Try it

preview
vue
<template>
  <p-pdf-viewer
    :src="FILE"
    layout="fit"
    offset-top="72" />
</template>

API

Props

PropsTypeDefaultDescription
srcString-Document source URL
passwordString-Document password
layoutStringfixedViewer layout sizing, valid value: fixed, fit
offsetTopNumber0Margin top when using layout fit
pageNumber1v-model:page value
scaleNumber1v-model:scale value
first-nav-labelStringFirstLabel to place in the first navigation button
last-nav-labelStringLastLabel to place in the last navigation button
num-of-pages-nav-labelStringofLabel to place on the preposition number of pages navigation button

Slots

NameDescription
defaultContent to place PDF Object
headerContent to place as header
footerContent to place as footer

Events

NameArgumentsDescription
loadingProgressEventEvent when loading document
loaded-Event when document loaded
errorErrorEvent when got error when loading the document
error-passwordErrorEvent when document require a password or password invalid

See Also

Released under the MIT License.