样式如图: 1:npm install --save vue-pdf 2:在需要使用的页面中
<div class="page">{{currentPage}}/{{pageCount}}</div>
<div class="pdf">
<span @click="changePdfPage(0)" class="arrow" :class="{grey:currentPage===1}"><i class="iconfont icon-changyongicon-1"></i></span>
<div class="main">
<pdf src="/demo.pdf" ref='ref' class="pdf" :page="currentPage" @num-pages="pageCount=$event" @page-loaded="currentPage=$event" @loaded="loadPdfHandler"></pdf>
</div>
<span @click="changePdfPage(1)" class="arrow" :class="{grey:currentPage===pageCount}"><i class="iconfont icon-changyongicon-"></i></span>
</div>
<script>
import pdf from 'vue-pdf'
export default {
components: {
pdf
},
data() {
return {
currentPage: 0, // pdf文件页码
pageCount: 0, // pdf文件总页数
fileType: 'pdf',
}
},
// created() {
// this.src = pdf.createLoadingTask(this.src)
// },//如果不是本地文件
methods: {
changePdfPage(val) {
if (val === 0 & this.currentPage > 1) {
this.currentPage--
}
if (val === 1 & this.currentPage < this.pageCount) {
this.currentPage++
}
},
loadPdfHandler(e) {
this.currentPage = 1
}
}
}
</script>
<style>
.page {
text-align: center;
font-size: 30px;
line-height: 40px;
}
.pdf {
display: flex;
justify-content: center;
align-items: center;
.arrow {
color: #999;
}
.arrow:hover {
color: white;
}
.grey:hover {
color: #999;
}
i {
font-size: 70px;
padding: 20px;
cursor: pointer;
}
.main {
width: 50%;
overflow: auto;
height: calc(100vh - 120px);
}
}
</style>
::: warning 若要浏览本地pdf文件,文件必须放在public文件夹下 :::