vue预览pdf文件

分页版本：

<p class="arrow" style="text-align: right; margin: 24px 0px 12px 0;color: white">

<span style="cursor: pointer;" @click="changePdfPage(0)" class="turn"

>上一页</span

>

<span style="margin: 0 15px;"

><span>{{ currentPage }}</span> / <span>{{ pageCount }}</span></span

>

<span

style="cursor: pointer;"

@click="changePdfPage(1)"

class="turn"

>下一页</span

>

</p>

<div style="max-height: 600px; overflow-x: auto; overflow-y: scroll;">

<pdf :src="src"

:page="currentPage"

@num-pages="pageCount = $event"

@page-loaded="currentPage = $event"

@loaded="loadPdfHandler"

style="width: 100%;" />

</div>

<script>

import pdf from 'vue-pdf-signature'

export default {

name: 'xxx',

components: {

pdf

},

data () {

return {

currentPage: 0, // pdf文件页码

pageCount: 0, // pdf文件总页数

src:'',}

}, methods: {

// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页

changePdfPage (val) {

if (val === 0 && this.currentPage > 1) {

this.currentPage--

}

if (val === 1 && this.currentPage < this.pageCount) {

this.currentPage++

}

},

// pdf加载时

loadPdfHandler (e) {

this.currentPage = 1 // 加载的时候先加载第一页

},

}

}

</script>

无分页自动加载全部页面

<pdf :src="fileUrl"

v-for="item in pageCount"

:key="item"

:page="item"

style="width: 100%;" />

fileUrl：文件地址

pageCount：页数

pdf:引用如上一致

pdf.createLoadingTask(fileUrl).promise.then(res => {

pageCount = res.numPages

})

createLoadingTask：pdf插件预加载函数