Skip to content

Events



EventDescriptionArgument type
loadedEmit when the PDF has finished loading-
loadProgressEmit the percentage of the PDF file loadednumber
rotateEmit when the PDF is rotated to a certain directionRotateEvent
update:darkModeEmit when the appearance mode changes to or from dark mode. More Infoboolean

loaded

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 onLoaded = () => {
  // PDF is already loaded
};
</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 = () => {
  // PDF is already loaded
};
</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 } 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() {
      // PDF is already loaded
    },
  },
});
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource" @loaded="onLoaded" />
  </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: {
    onLoaded() {
      // PDF is already loaded
    },
  },
};
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource" @loaded="onLoaded" />
  </div>
</template>

loadProgress

ArgumentDescription
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) {
      // 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>

rotate

ArgumentDescription
fn(value: RotateEvent)Indicate the rotation value

RotateEvent

KeyDescriptionType
directionLatest rotation direction'clockwise' | 'counterclockwise'
rotateLatest rotation numbernumber

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

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