安裝vue-pdf
npm -i vue-pdf --save-dev
引入使用
import pdf from 'vue-pdf'
components: {
pdf
},
<pdf
:page="currentPage"
@num-pages="pageCount = $event"
@loaded="loadPdfHandler"
:src="loadingTask"
></pdf>
示例
pdf翻頁
<template>
<div class="hello">
{{currentPage}} / {{pageCount}}
<button @click="prePage">上一頁</button>
<button @click="nextPage">下一頁</button>
<pdf
:page="currentPage"
@num-pages="pageCount = $event"
@loaded="loadPdfHandler"
:src="loadingTask"
></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
name: 'HelloWorld',
components: {
pdf
},
data () {
return {
loadingTask: './static/11.pdf',
currentPage: 1,
pageCount: 0
}
},
mounted () {
},
methods: {
prePage () {
if (this.currentPage <= 1) return
this.currentPage -= 1
},
nextPage () {
if (this.currentPage >= this.pageCount) return
this.currentPage += 1
},
loadPdfHandler (e) {
console.log(e)
this.currentPage = 1 // 加載的時候先加載第一頁
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
pdf平鋪
<template>
<div class="hello">
<pdf
v-for="i in numPages"
:key="i"
:src="src"
:page="i"
style="width: 100%"
></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
name: 'HelloWorld',
components: {
pdf
},
data () {
return {
// loadingTask: null,
src: '',
numPages: undefined
}
},
mounted () {
const url = './static/11.pdf'
this.src = pdf.createLoadingTask(url)
this.src.promise.then(pdf => {
this.numPages = pdf.numPages
})
},
methods: {
}
}
</script>