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 - Pages
pageOverlay>=3.4.0
ThepageOverlay slot allows you to render custom content on top of each PDF page. This is useful for adding overlays, watermarks, or interactive elements that need to be positioned on specific pages.
INFO
This slot is only available for Organization license users.
| Prop | Description | Type |
|---|---|---|
pageElement | The HTML element container of the PDF page | HTMLElement |
pageIndex | Zero-based index of the current page | number |
scale | Current scale/zoom level of the page from viewport | number |
Example
vue
<script setup lang="ts">import { VPdfViewer }from "@vue-pdf-viewer/viewer";import { computed }from "vue";const pdfFileSource = "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";// Helper function to calculate responsive styles based on scaleconst getOverlayStyle = (scale: number)=> { return { fontSize:`${14 * scale}px`, padding:`${8 * scale}px ${12 * scale}px`, top:`${10 * scale}px`, right:`${10 * scale}px`, };};</script><template> <div :style="{ width:'1028px', height:'700px' }"> <VPdfViewer :src="pdfFileSource"> <template #pageOverlay="{ pageIndex, scale }"> <div class="custom-overlay" :style="getOverlayStyle(scale)"> Page {{ pageIndex+ 1 }} </div> </template> </VPdfViewer> </div></template><style scoped>.custom-overlay { position:absolute; background:rgba(0,0,0,0.7); color:white; border-radius:4px; pointer-events:auto; transition:all 0.2s ease;}</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";// Helper function to calculate responsive styles based on scaleconst getOverlayStyle = (scale)=> { return { fontSize:`${14 * scale}px`, padding:`${8 * scale}px ${12 * scale}px`, top:`${10 * scale}px`, right:`${10 * scale}px`, };};</script><template> <div :style="{ width:'1028px', height:'700px' }"> <VPdfViewer :src="pdfFileSource"> <template #pageOverlay="{ pageIndex, scale }"> <div class="custom-overlay" :style="getOverlayStyle(scale)"> Page {{ pageIndex+ 1 }} </div> </template> </VPdfViewer> </div></template><style scoped>.custom-overlay { position:absolute; background:rgba(0,0,0,0.7); color:white; border-radius:4px; pointer-events:auto; transition:all 0.2s ease;}</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", }; }, methods: { // Helper method to calculate responsive styles based on scale getOverlayStyle(scale: number) { return { fontSize:`${14 * scale}px`, padding:`${8 * scale}px ${12 * scale}px`, top:`${10 * scale}px`, right:`${10 * scale}px`, }; }, },});</script><template> <div :style="{ width:'1028px', height:'700px' }"> <VPdfViewer :src="pdfFileSource"> <template #pageOverlay="{ pageIndex, scale }"> <div class="custom-overlay" :style="getOverlayStyle(scale)"> Page {{ pageIndex+ 1 }} </div> </template> </VPdfViewer> </div></template><style scoped>.custom-overlay { position:absolute; background:rgba(0,0,0,0.7); color:white; border-radius:4px; pointer-events:auto; transition:all 0.2s ease;}</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", }; }, methods: { // Helper method to calculate responsive styles based on scale getOverlayStyle(scale) { return { fontSize:`${14 * scale}px`, padding:`${8 * scale}px ${12 * scale}px`, top:`${10 * scale}px`, right:`${10 * scale}px`, }; }, },};</script><template> <div :style="{ width:'1028px', height:'700px' }"> <VPdfViewer :src="pdfFileSource"> <template #pageOverlay="{ pageIndex, scale }"> <div class="custom-overlay" :style="getOverlayStyle(scale)"> Page {{ pageIndex+ 1 }} </div> </template> </VPdfViewer> </div></template><style scoped>.custom-overlay { position:absolute; background:rgba(0,0,0,0.7); color:white; border-radius:4px; pointer-events:auto; transition:all 0.2s ease;}</style>TIP
Scaling Strategies:
JavaScript-based scaling (shown in examples above): Multiply your base values by the
scaleprop for precise control over font-size, padding, and positioning.CSS variable approach: Use the
--scale-factorCSS variable for automatic scaling calculations:
css
.custom-element { font-size:calc(14px * var(--scale-factor)); width:calc(100px * var(--scale-factor));}Pointer Events: The overlay container haspointer-events: none by default, allowing clicks to pass through to the PDF. Addpointer-events: auto to your custom elements if you need them to be interactive.
Practical Tutorials
For real-world implementations of thepageOverlay slot, check out these tutorials:
- Adding Page Watermarks - Learn how to add a custom watermark to your PDF pages
- Adding Custom Bounding Boxes - Implement interactive bounding boxes on PDF pages
Slots - Tools
| Name | Description |
|---|---|
commentPanelTool | To override the icon orcomment panel flow |
dropFileZone | To change the style of the drop file zone |
downloadTool | To override the icon ordownload flow |
fullScreenTool | To override the icon orfull 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 oropen file flow |
pageNavigationTool | To customize the display of the navigation UI |
printTool | To override the icon orprint flow |
thumbnailTool | To override the icon orthumbnail flow |
themeTool | To change thelight anddark 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 | Returntrue 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.targetas 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>