PDF Viewer

Open and View PDF Document

Usage

Simple Usage

Failed to load PDF

URL:

/design-system/assets/pdf/Calibrator-v3.pdf

Reason:

PDFJS Version:

100%

 

No Data

of 0

preview

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

<script setup>
  import FILE from '~/assets/Calibrator-v3.pdf'
</script>

With Header And Footer

• Label
• Label
• Label

Failed to load PDF

URL:

/design-system/assets/pdf/Calibrator-v3.pdf

Reason:

PDFJS Version:

100%

 

No Data

of 0

preview

<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.

This component doesn't provide any UI for handling input password. You have to do it yourself.

Failed to load PDF

URL:

/design-system/assets/pdf/Calibrator-v3_protected.pdf

Reason:

PDFJS Version:

100%

 

No Data

of 0

preview

<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.

Try it

onoff

Enable Layout fit

Failed to load PDF

URL:

/design-system/assets/pdf/Calibrator-v3.pdf

Reason:

PDFJS Version:

100%

 

No Data

of 0

preview

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

API

Props

Props	Type	Default	Description
src	String	-	Document source URL
paddword	String	-	Document password
layout	String	fixed	Viewer layout sizing, valid value: fixed, fit
offsetTop	Number	0	Margin top when using layout fit
page	Number	1	v-model:page value
scale	Number	1	v-model:scale value

Slots

Name	Description
default	Content to place PDF Object
header	Content to place as header
footer	Content to place as footer

Events

Name	Arguments	Description
loaded	-	Event when document loaded
error	Error	Event when got error when loading the document
error-password	Error	Event when document require a password or password invalid

See Also

• PDF Object
• Download Calibrator v3.0.0