A PDF viewer for Vue using Mozilla's PDF.js
npm install --save pdfvuer
<template>
<pdf src="./static/relativity.pdf" :page=1></pdf>
</template>
<script>
import pdf from 'pdfvuer'
export default {
components: {
pdf
}
}
<template>
<div id="pdfvuer">
<div id="buttons" class="ui grey three item inverted bottom fixed menu transition hidden">
<a class="item" @click="page > 1 ? page-- : 1">
<i class="left chevron icon"></i>
Back
</a>
<a class="ui active item">
{{page}} / {{ numPages ? numPages : '∞' }}
</a>
<a class="item" @click="page < numPages ? page++ : 1">
Forward
<i class="right chevron icon"></i>
</a>
</div>
<pdf :src="pdfdata" v-for="i in numPages" :key="i" :id="i" :page="i"
:scale="scale" style="width:100%;margin:20px auto;"></pdf>
</div>
</template>
<script>
import pdfvuer from 'pdfvuer'
export default {
components: {
pdf: pdfvuer
},
data () {
return {
page: 1,
numPages: 0,
pdfdata: undefined,
errors: [],
scale: 'page-width'
}
},
mounted () {
this.getPdf()
},
watch: {
show: function (s) {
if(s) {
this.getPdf();
}
},
page: function (p) {
if( window.pageYOffset <= this.findPos(document.getElementById(p)) || ( document.getElementById(p+1) && window.pageYOffset >= this.findPos(document.getElementById(p+1)) )) {
// window.scrollTo(0,this.findPos(document.getElementById(p)));
document.getElementById(p).scrollIntoView();
}
}
},
methods: {
getPdf () {
var self = this;
self.pdfdata = pdfvuer.createLoadingTask('./static/relativity.pdf');
self.pdfdata.then(pdf => {
self.numPages = pdf.numPages;
window.onscroll = function() {
changePage()
stickyNav()
}
// Get the offset position of the navbar
var sticky = $('#buttons')[0].offsetTop
// Add the sticky class to the self.$refs.nav when you reach its scroll position. Remove "sticky" when you leave the scroll position
function stickyNav() {
if (window.pageYOffset >= sticky) {
$('#buttons')[0].classList.remove("hidden")
} else {
$('#buttons')[0].classList.add("hidden")
}
}
function changePage () {
var i = 1, count = Number(pdf.numPages);
do {
if(window.pageYOffset >= self.findPos(document.getElementById(i)) &&
window.pageYOffset <= self.findPos(document.getElementById(i+1))) {
self.page = i
}
i++
} while ( i < count)
if (window.pageYOffset >= self.findPos(document.getElementById(i))) {
self.page = i
}
}
});
},
findPos(obj) {
return obj.offsetTop;
}
}
}
</script>
<style lang="css" scoped>
#buttons {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Page content */
.content {
padding: 16px;
}
</style>
The url of the pdf file. src
may also be a string|TypedArray|DocumentInitParameters|PDFDataRangeTransport
for more details, see PDFJS.getDocument()
.
The page number to display.
The page rotation in degrees, only multiple of 90 are valid.
The scaling factor. By default, the pdf will be scaled to match the page width with the container width.
The total number of pages of the pdf.
src
: see:src
prop
This function creates a PDFJS loading task that can be used and reused as:src
property.
Advanced Example - https://blog.koley.in/pdfvuer
Used in production by Gratiato
Made with ❤️ at IIIT Bangalore
MIT © Gaurav Koley, 2018