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

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.