Slots
VPV provides slots for customizing all tools in the toolbar, allowing you to override the default UI elements. Each tool has a slot with a prefix icon, making it easy to change any icons in the toolbar.
Slots - Icons
Name | Description |
---|---|
iconThumbnail | To change the thumbnail icon |
iconSearch | To change the search icon |
iconPrevPage | To change the previous page icon |
iconNextPage | To change the next page icon |
iconZoomOut | To change the zoom-out icon |
iconZoomIn | To change the zoom-in icon |
iconThemeDark | To change the dark mode icon when the current state is light |
iconThemeLight | To change the light mode icon when the current state is dark |
iconOpenFile | To change the open local file icon |
iconDownload | To change the download icon |
iconPrint | To change the print icon |
iconFullScreen | To change the full screen icon |
iconMoreOptions | To change the more option menu icon |
iconFirstPage | To change the first page icon |
iconLastPage | To change the last page icon |
iconRotateClockwise | To change the rotate clockwise icon |
iconRotateCounterClockwise | To change the rotate counterclockwise icon |
iconTextSelection | To change the text selection mode icon |
iconHandMode | To change the hand mode icon |
iconScrollingPage | To change the page scrolling icon |
iconScrollingVertical | To change the vertical scrolling icon |
iconScrollingHorizontal | To change the horizontal scrolling icon |
iconScrollingWrapped | To change the wrapped scrolling icon |
iconPageViewSingle | To change the single page view icon |
iconPageViewDual | To change the dual page view icon |
iconDocProperties | To change the document properties icon |
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";
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #iconPrint>
<span>P</span>
</template>
</VPdfViewer>
</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";
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #iconPrint>
<span>P</span>
</template>
</VPdfViewer>
</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",
};
},
});
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #iconPrint>
<span>P</span>
</template>
</VPdfViewer>
</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",
};
},
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #iconPrint>
<span>P</span>
</template>
</VPdfViewer>
</div>
</template>
Slots - Tools
Name | Description |
---|---|
dropFileZone | To change the style of the drop file zone |
downloadTool | To override the icon or download flow |
fullScreenTool | To override the icon or full screen flow |
loader | To replace the default loader |
loaderImage | To replace the default loader image |
loaderProgress | To show or adjust the progress percentage which is below the loader image |
openFileTool | To override the icon or open file flow |
pageNavigationTool | To customize the display of the navigation UI |
printTool | To override the icon or print flow |
thumbnailTool | To override the icon or thumbnail flow |
themeTool | To change the light and dark icons |
zoomTool | To customize the display of the zoom UI |
dropFileZone
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";
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #dropFileZone> Drop file here </template>
</VPdfViewer>
</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";
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #dropFileZone> Drop file here </template>
</VPdfViewer>
</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",
};
},
});
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #dropFileZone> Drop file here </template>
</VPdfViewer>
</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",
};
},
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #dropFileZone> Drop file here </template>
</VPdfViewer>
</div>
</template>
downloadTool
Prop | Description | Type |
---|---|---|
onClick | Download file function handler | () => void |
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";
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #downloadTool="{ onClick }">
<button @click="onClick">download</button>
</template>
</VPdfViewer>
</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";
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #downloadTool="{ onClick }">
<button @click="onClick">download</button>
</template>
</VPdfViewer>
</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",
};
},
});
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #downloadTool="{ onClick }">
<button @click="onClick">download</button>
</template>
</VPdfViewer>
</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",
};
},
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #downloadTool="{ onClick }">
<button @click="onClick">download</button>
</template>
</VPdfViewer>
</div>
</template>
fullScreenTool
Prop | Description | Type |
---|---|---|
isSupported | Indicate whether the browser's full screen mode is supported | boolean |
onClick | Full screen function handler | () => void |
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";
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #fullScreenTool="{ onClick, isSupported }">
<button @click="onClick" :disabled="!isSupported">full screen</button>
</template>
</VPdfViewer>
</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";
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #fullScreenTool="{ onClick, isSupported }">
<button @click="onClick" :disabled="!isSupported">full screen</button>
</template>
</VPdfViewer>
</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",
};
},
});
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #fullScreenTool="{ onClick, isSupported }">
<button @click="onClick" :disabled="!isSupported">full screen</button>
</template>
</VPdfViewer>
</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",
};
},
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #fullScreenTool="{ onClick, isSupported }">
<button @click="onClick" :disabled="!isSupported">full screen</button>
</template>
</VPdfViewer>
</div>
</template>
loader
Prop | Description | Type |
---|---|---|
progress | State of loading progress in percentage | number |
loaded | Return true when the PDF has finished loading | boolean |
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";
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #loader="{ progress, loaded }">
<div v-if="!loaded" class="loader-wrapper">
<img src="/your-loader.gif" />
</div>
</template>
</VPdfViewer>
</div>
</template>
<style scoped>
.loader-wrapper {
position: absolute;
z-index: 12;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(251 191 36 / 0.75);
}
</style>
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";
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #loader="{ progress, loaded }">
<div v-if="!loaded" class="loader-wrapper">
<img src="/your-loader.gif" />
</div>
</template>
</VPdfViewer>
</div>
</template>
<style scoped>
.loader-wrapper {
position: absolute;
z-index: 12;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(251 191 36 / 0.75);
}
</style>
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",
};
},
});
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #loader="{ progress, loaded }">
<div v-if="!loaded" class="loader-wrapper">
<img src="/your-loader.gif" />
</div>
</template>
</VPdfViewer>
</div>
</template>
<style scoped>
.loader-wrapper {
position: absolute;
z-index: 12;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(251 191 36 / 0.75);
}
</style>
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",
};
},
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #loader="{ progress, loaded }">
<div v-if="!loaded" class="loader-wrapper">
<img src="/your-loader.gif" />
</div>
</template>
</VPdfViewer>
</div>
</template>
<style scoped>
.loader-wrapper {
position: absolute;
z-index: 12;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(251 191 36 / 0.75);
}
</style>
loaderImage
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";
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #loaderImage>
<img src="/your-spin-image.png" width="80" height="80" />
</template>
</VPdfViewer>
</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";
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #loaderImage>
<img src="/your-spin-image.png" width="80" height="80" />
</template>
</VPdfViewer>
</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",
};
},
});
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #loaderImage>
<img src="/your-spin-image.png" width="80" height="80" />
</template>
</VPdfViewer>
</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",
};
},
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #loaderImage>
<img src="/your-spin-image.png" width="80" height="80" />
</template>
</VPdfViewer>
</div>
</template>
loaderProgress
Prop | Description | Type |
---|---|---|
progress | State of loading progress in percentage | number |
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";
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #loaderProgress="{ progress }">
<p class="m-0">
<strong>{{ progress }}</strong>
</p>
</template>
</VPdfViewer>
</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";
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #loaderProgress="{ progress }">
<p class="m-0">
<strong>{{ progress }}</strong>
</p>
</template>
</VPdfViewer>
</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",
};
},
});
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #loaderProgress="{ progress }">
<p class="m-0">
<strong>{{ progress }}</strong>
</p>
</template>
</VPdfViewer>
</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",
};
},
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #loaderProgress="{ progress }">
<p class="m-0">
<strong>{{ progress }}</strong>
</p>
</template>
</VPdfViewer>
</div>
</template>
openFileTool
Prop | Description | Type |
---|---|---|
onClick | Open file function handler | () => void |
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";
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #openFileTool="{ onClick }">
<button @click="onClick">open local file</button>
</template>
</VPdfViewer>
</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";
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #openFileTool="{ onClick }">
<button @click="onClick">open local file</button>
</template>
</VPdfViewer>
</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",
};
},
});
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #openFileTool="{ onClick }">
<button @click="onClick">open local file</button>
</template>
</VPdfViewer>
</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",
};
},
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #openFileTool="{ onClick }">
<button @click="onClick">open local file</button>
</template>
</VPdfViewer>
</div>
</template>
pageNavigationTool
Prop | Description | Type |
---|---|---|
total | Total page count of the PDF document | number |
current | Current page number | number |
onNext | Next page function handler | () => void |
onPrev | Previous page function handler | () => void |
onChangePage | Page change function handler | (page: number) => void |
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 handlePageEntered = (
e: Event,
changePage: (pageNumber: number) => void,
) => {
const value = (e.target as HTMLInputElement).value;
changePage(+value);
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template
#pageNavigationTool="{ total, current, onNext, onPrev, onChangePage }"
>
<input
:value="current"
@keyup.enter="handlePageEntered($event, onChangePage)"
/>/{{ total }}
<button @click="onPrev">Previous</button>
<button @click="onNext">Next</button>
</template>
</VPdfViewer>
</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 handlePageEntered = (e, changePage) => {
const value = e.target.value;
changePage(+value);
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template
#pageNavigationTool="{ total, current, onNext, onPrev, onChangePage }"
>
<input
:value="current"
@keyup.enter="handlePageEntered($event, onChangePage)"
/>/{{ total }}
<button @click="onPrev">Previous</button>
<button @click="onNext">Next</button>
</template>
</VPdfViewer>
</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: {
handlePageEntered(e, changePage) {
const value = e.target.value;
changePage(+value);
},
},
});
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template
#pageNavigationTool="{ total, current, onNext, onPrev, onChangePage }"
>
<input
:value="current"
@keyup.enter="handlePageEntered($event, onChangePage)"
/>/{{ total }}
<button @click="onPrev">Previous</button>
<button @click="onNext">Next</button>
</template>
</VPdfViewer>
</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: {
handlePageEntered(e, changePage) {
const value = e.target.value;
changePage(+value);
},
},
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template
#pageNavigationTool="{ total, current, onNext, onPrev, onChangePage }"
>
<input
:value="current"
@keyup.enter="handlePageEntered($event, onChangePage)"
/>/{{ total }}
<button @click="onPrev">Previous</button>
<button @click="onNext">Next</button>
</template>
</VPdfViewer>
</div>
</template>
printTool
Prop | Description | Type |
---|---|---|
onClick | Print PDF function handler | () => void |
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";
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #printTool="{ onClick }">
<button @click="onClick">Print</button>
</template>
</VPdfViewer>
</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";
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #printTool="{ onClick }">
<button @click="onClick">Print</button>
</template>
</VPdfViewer>
</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",
};
},
});
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #printTool="{ onClick }">
<button @click="onClick">Print</button>
</template>
</VPdfViewer>
</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",
};
},
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #printTool="{ onClick }">
<button @click="onClick">Print</button>
</template>
</VPdfViewer>
</div>
</template>
themeTool
Prop | Description | Type |
---|---|---|
isDark | State of the browser preference mode | boolean |
onClick | Function to switch the VPV's appearence | boolean |
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";
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #themeTool="{ isDark, onClick }">
<button @click="onClick">
<span v-if="isDark">Day</span>
<span v-else>Night</span>
</button>
</template>
</VPdfViewer>
</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";
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #themeTool="{ isDark, onClick }">
<button @click="onClick">
<span v-if="isDark">Day</span>
<span v-else>Night</span>
</button>
</template>
</VPdfViewer>
</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",
};
},
});
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #themeTool="{ isDark, onClick }">
<button @click="onClick">
<span v-if="isDark">Day</span>
<span v-else>Night</span>
</button>
</template>
</VPdfViewer>
</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",
};
},
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #themeTool="{ isDark, onClick }">
<button @click="onClick">
<span v-if="isDark">Day</span>
<span v-else>Night</span>
</button>
</template>
</VPdfViewer>
</div>
</template>
thumbnailTool
Prop | Description | Type |
---|---|---|
onToggle | Function to toggle the visibility of the thumbnail sidebar | () => void |
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";
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #thumbnailTool="{ onToggle }">
<button @click="onToggle">T</button>
</template>
</VPdfViewer>
</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";
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #thumbnailTool="{ onToggle }">
<button @click="onToggle">T</button>
</template>
</VPdfViewer>
</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",
};
},
});
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #thumbnailTool="{ onToggle }">
<button @click="onToggle">T</button>
</template>
</VPdfViewer>
</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",
};
},
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #thumbnailTool="{ onToggle }">
<button @click="onToggle">T</button>
</template>
</VPdfViewer>
</div>
</template>
zoomTool
Prop | Description | Type |
---|---|---|
currentScale | Current scale of the Vue PDF Viewer | number |
zoom | Zoom function | (nextScale: number) => void |
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";
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #zoomTool="{ currentScale, zoom }">
<button @click="zoom(currentScale - 2)">ZoomOut</button>
<strong>{{ currentScale }}</strong>
<button @click="zoom(currentScale + 5)">ZoomIn</button>
</template>
</VPdfViewer>
</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";
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #zoomTool="{ currentScale, zoom }">
<button @click="zoom(currentScale - 2)">ZoomOut</button>
<strong>{{ currentScale }}</strong>
<button @click="zoom(currentScale + 5)">ZoomIn</button>
</template>
</VPdfViewer>
</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",
};
},
});
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #zoomTool="{ currentScale, zoom }">
<button @click="zoom(currentScale - 2)">ZoomOut</button>
<strong>{{ currentScale }}</strong>
<button @click="zoom(currentScale + 5)">ZoomIn</button>
</template>
</VPdfViewer>
</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",
};
},
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource">
<template #zoomTool="{ currentScale, zoom }">
<button @click="zoom(currentScale - 2)">ZoomOut</button>
<strong>{{ currentScale }}</strong>
<button @click="zoom(currentScale + 5)">ZoomIn</button>
</template>
</VPdfViewer>
</div>
</template>