Events
| Event | Description | Argument type |
|---|---|---|
| loaded | Emit when the PDF has finished loading | (properties?: PdfProperties) => void |
| loadProgress | Emit the percentage of the PDF file loaded | (progress: number) => void |
| loadError | Emit when there is an error while loading the PDF | (error: any) => void |
| pageChanged | Emit when the current focused page is changed | (page: number) => void |
| rotate | Emit when the PDF is rotated to a certain direction | (rotateEvent: RotateEvent) => void |
| update:darkMode | Emit when the appearance mode changes to or from dark mode. More Info | (isDark: boolean) => void |
loaded
The event is emitted when the PDF has finished loading. This is useful for performing actions after the PDF has been loaded, such as updating the UI or triggering other events.
| Argument | Description |
|---|---|
fn(value: PdfProperties) | Indicate the PDF properties |
PdfProperties
| Key | Description | Type |
|---|---|---|
| filename | The name of the PDF file | string |
| fileSize | The size of the PDF file in bytes | string |
| title | The document title metadata field | string |
| author | The document author metadata field | string |
| subject | The document subject metadata field | string |
| keywords | Keywords associated with the document in metadata | string |
| creator | The application used to create the original document | string |
| createdOn | The date when the document was created | string |
| modifierOn | The date when the document was last modified | string |
| pdfProducer | The application used to convert the document to PDF | string |
| pdfVersion | The version of the PDF specification used | string |
| pageCount | The total number of pages in the document | number |
Example
vue
<script setup lang="ts">
import { VPdfViewer, type PdfProperties } from "@vue-pdf-viewer/viewer";
const pdfFileSource =
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
const onLoaded = (properties?: PdfProperties) => {
// PDF is already loaded
console.log(properties);
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" @loaded="onLoaded" />
</div>
</template>vue
<script setup>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
const pdfFileSource =
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
const onLoaded = (properties) => {
// PDF is already loaded
console.log(properties);
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" @loaded="onLoaded" />
</div>
</template>vue
<script lang="ts">
import { defineComponent } from "vue";
import { VPdfViewer, type PdfProperties } from "@vue-pdf-viewer/viewer";
export default defineComponent({
components: { VPdfViewer },
data() {
return {
pdfFileSource:
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
};
},
methods: {
onLoaded(properties?: PdfProperties) {
// PDF is already loaded
console.log(properties);
},
},
});
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" @loaded="onLoaded" />
</div>
</template>vue
<script>
import { VPdfViewer, type PdfProperties } from "@vue-pdf-viewer/viewer";
export default {
components: { VPdfViewer },
data() {
return {
pdfFileSource:
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
};
},
methods: {
onLoaded(properties?: PdfProperties) {
// PDF is already loaded
console.log(properties);
},
},
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" @loaded="onLoaded" />
</div>
</template>loadProgress
The event is emitted when the PDF is loading. This is useful for performing actions when the PDF is loading, such as updating the UI or triggering other events.
| Argument | Description |
|---|---|
fn(value: number) | Indicate the loading percentage |
Example
vue
<script setup lang="ts">
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
const pdfFileSource =
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
const onLoadProgress = (progress: number) => {
// Do something with the loading progress percentage
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" @loadProgress="onLoadProgress" />
</div>
</template>vue
<script setup>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
const pdfFileSource =
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
const onLoadProgress = (progress) => {
// Do something with the loading progress percentage
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" @loadProgress="onLoadProgress" />
</div>
</template>vue
<script lang="ts">
import { defineComponent } from "vue";
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
export default defineComponent({
components: { VPdfViewer },
data() {
return {
pdfFileSource:
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
};
},
methods: {
onLoadProgress(progress: number) {
// Do something with the loading progress percentage
},
},
});
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" @loadProgress="onLoadProgress" />
</div>
</template>vue
<script>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
export default {
components: { VPdfViewer },
data() {
return {
pdfFileSource:
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
};
},
methods: {
onLoadProgress(progress) {
// Do something with the loading progress percentage
},
},
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" @loadProgress="onLoadProgress" />
</div>
</template>loadError
The event is emitted when there is an error loading the PDF file. This can happen due to various reasons such as network issues, invalid PDF format, or access restrictions. The event handler receives the error object which contains details about what went wrong.
| Argument | Description |
|---|---|
fn(error: any) | Indicate the load error |
Example
vue
<script setup lang="ts">
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
const pdfFileSource =
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
const onLoadError = (error: any) => {
// Do something with the error
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" @loadError="onLoadError" />
</div>
</template>vue
<script setup>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
const pdfFileSource =
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
const onLoadError = (error) => {
// Do something with the error
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" @loadError="onLoadError" />
</div>
</template>vue
<script lang="ts">
import { defineComponent } from "vue";
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
export default defineComponent({
components: { VPdfViewer },
data() {
return {
pdfFileSource:
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
};
},
methods: {
onLoadError(error: any) {
// Do something with the error
},
},
});
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" @loadError="onLoadError" />
</div>
</template>vue
<script>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
export default {
components: { VPdfViewer },
data() {
return {
pdfFileSource:
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
};
},
methods: {
onLoadError(error) {
// Do something with the error
},
},
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" @loadError="onLoadError" />
</div>
</template>pageChanged
The event is emitted when the current focused page is changed. This is useful for performing actions when the current focused page is changed, such as updating the UI or triggering other events.
| Argument | Description |
|---|---|
fn(value: number) | Indicate the current focused page |
Example
vue
<script setup lang="ts">
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
const pdfFileSource =
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
const onPageChanged = (page: number) => {
// Do something with the current focused page
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" @pageChanged="onPageChanged" />
</div>
</template>vue
<script setup>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
const pdfFileSource =
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
const onPageChanged = (page) => {
// Do something with the current focused page
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" @pageChanged="onPageChanged" />
</div>
</template>vue
<script lang="ts">
import { defineComponent } from "vue";
import { VPdfViewer, type RotateEvent } from "@vue-pdf-viewer/viewer";
export default defineComponent({
components: { VPdfViewer },
data() {
return {
pdfFileSource:
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
};
},
methods: {
onPageChanged(page: number) {
// Do something with the current focused page
},
},
});
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" @pageChanged="onPageChanged" />
</div>
</template>vue
<script>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
export default {
components: { VPdfViewer },
data() {
return {
pdfFileSource:
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
};
},
methods: {
onPageChanged(page) {
// Do something with the current focused page
},
},
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" @pageChanged="onPageChanged" />
</div>
</template>rotate
The event is emitted when the PDF is rotated to a certain direction. This is useful for performing actions when the PDF is rotated to a certain direction, such as updating the UI or triggering other events.
| Argument | Description |
|---|---|
fn(value: RotateEvent) | Indicate the rotation value |
RotateEvent
| Key | Description | Type |
|---|---|---|
direction | Latest rotation direction | 'clockwise' | 'counterclockwise' |
rotate | Latest rotation number | number |
Example
vue
<script setup lang="ts">
import { VPdfViewer, type RotateEvent } from "@vue-pdf-viewer/viewer";
const pdfFileSource =
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
const onRotated = (value: RotateEvent) => {
// Do something with the rotate event callback
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" @rotate="onRotated" />
</div>
</template>vue
<script setup>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
const pdfFileSource =
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
const onRotated = (value) => {
// Do something with the rotate event callback
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" @rotate="onRotate" />
</div>
</template>vue
<script lang="ts">
import { defineComponent } from "vue";
import { VPdfViewer, type RotateEvent } from "@vue-pdf-viewer/viewer";
export default defineComponent({
components: { VPdfViewer },
data() {
return {
pdfFileSource:
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
};
},
methods: {
onRotated(value) {
// Do something with the rotate event callback
},
},
});
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" @rotate="onRotate" />
</div>
</template>vue
<script>
import { VPdfViewer, type RotateEvent } from '@vue-pdf-viewer/viewer';
export default {
components: { VPdfViewer },
data() {
return {
pdfFileSource: "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
}
},
methods: {
onRotated(value) {
// Do something with the rotate event callback
}
}
}
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" @rotate="onRotate" />
</div>
</template>update:darkMode
The event is emitted when the appearance mode changes to or from dark mode. This is useful for performing actions when the appearance mode changes to or from dark mode, such as updating the UI or triggering other events.
| Argument | Description |
|---|---|
fn(value: boolean) | Indicate that the current appearance is True if in dark mode |
Example
vue
<script setup lang="ts">
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
const pdfFileSource =
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
const onDarkModeChange = (isDark: boolean) => {
// Do something with the current appearance mode
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" @update:darkMode="onDarkModeChange" />
</div>
</template>vue
<script setup>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
const pdfFileSource =
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
const onDarkModeChange = (isDark) => {
// Do something with the current appearance mode
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" @update:darkMode="onDarkModeChange" />
</div>
</template>vue
<script lang="ts">
import { defineComponent } from "vue";
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
export default defineComponent({
components: { VPdfViewer },
data() {
return {
pdfFileSource:
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
};
},
methods: {
onDarkModeChange(isDark) {
// Do something with the current appearance mode
},
},
});
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" @update:darkMode="onDarkModeChange" />
</div>
</template>vue
<script>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
export default {
components: { VPdfViewer },
data() {
return {
pdfFileSource:
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
};
},
methods: {
onDarkModeChange(isDark) {
// Do something with the current appearance mode
},
},
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" @update:darkMode="onDarkModeChange" />
</div>
</template>