Slots
Vue PDF Viewer 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 |
|---|---|
iconCommentPanel | To change the comment panel icon |
iconDocProperties | To change the document properties icon |
iconDownload | To change the download icon |
iconFirstPage | To change the first page icon |
iconFullScreen | To change the full screen icon |
iconHandMode | To change the hand mode icon |
iconLastPage | To change the last page icon |
iconMoreOptions | To change the more option menu icon |
iconNextPage | To change the next page icon |
iconOpenFile | To change the open local file icon |
iconPageViewDual | To change the dual page view icon |
iconPageViewDualWithCover | To change the dual page view with cover icon |
iconPageViewSingle | To change the single page view icon |
iconPrevPage | To change the previous page icon |
iconPrint | To change the print icon |
iconRotateClockwise | To change the rotate clockwise icon |
iconRotateCounterClockwise | To change the rotate counterclockwise icon |
iconScrollingHorizontal | To change the horizontal scrolling icon |
iconScrollingPage | To change the page scrolling icon |
iconScrollingVertical | To change the vertical scrolling icon |
iconScrollingWrapped | To change the wrapped scrolling icon |
iconSearch | To change the search icon |
iconTextSelection | To change the text selection mode 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 |
iconThumbnail | To change the thumbnail icon |
iconZoomIn | To change the zoom-in icon |
iconZoomOut | To change the zoom-out 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 |
|---|---|
commentPanelTool | To override the icon or comment panel flow |
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 |
commentPanelTool
| Prop | Description | Type |
|---|---|---|
onClick | Comment panel tool 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 #commentPanelTool="{ onClick }"> <button @click="onClick">Comment Panel Tool</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 #commentPanelTool="{ onClick }"> <button @click="onClick">Comment Panel Tool</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 #commentPanelTool="{ onClick }"> <button @click="onClick">Comment Panel Tool</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 #commentPanelTool="{ onClick }"> <button @click="onClick">Comment Panel Tool</button> </template> </VPdfViewer> </div> </template>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 Viewer'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>