App.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<script setup> import { ref } from 'vue' import { VuePDF, usePDF } from '@tato30/vue-pdf' const page = ref(1) const { pdf, pages } = usePDF('https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf') </script> <template> <div id="app"> <!-- Controls Section --> <div id="controls"> <button @click="page = page > 1 ? page - 1 : page">Prev</button> <span>{{ page }} / {{ pages }}</span> <button @click="page = page < pages ? page + 1 : page">Next</button> </div> <!-- PDF Viewer Section --> <div id="viewer"> <VuePDF :pdf="pdf" :page="page" /> </div> </div> </template> <style> /* Ensure html, body and app container take full height */ html, body { margin: 0; padding: 0; width: 100%; height: 100%; } #app { display: flex; flex-direction: column; width: 100%; height: 100%; } #controls { padding: 10px; background-color: #f0f0f0; /* Light background for controls */ text-align: center; z-index: 1; /* Keeps controls on top */ position: relative; } #viewer { flex: 1; /* This ensures the viewer takes all available space */ width: 100%; height: 100%; /* Ensure full height */ display: flex; justify-content: center; align-items: center; background-color: #000; /* Set background to black for better contrast */ } VuePDF { width: 100%; /* Ensure the PDF itself takes the full width */ height: 100%; /* Ensure the PDF itself takes the full height */ } </style> |
