一、安装npm install --save vue-pdf
二、代码部分
<template>
<div class="detail">
<div class="pdfTop">
<div class="left" @click="goBack"></div>
<div style="font-size:16px" class="textpdf">{{name}}</div>
</div>
<div class="pdf" v-show="fileType === 'pdf'">
<div style="overflow: hidden;" class="pdfbox">
<pdf
:src="pdfSrc"
:page="currentPage"
@num-pages="pageCount=$event"
@page-loaded="currentPage=$event"
@loaded="loadPdfHandler"
></pdf>
</div>
<p class="arrow">
<span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">上一页</span>
{{currentPage}} / {{pageCount}}
<span
@click="changePdfPage(1)"
class="turn"
:class="{grey: currentPage==pageCount}"
>下一页</span>
</p>
</div>
</div>
</template>
<script>
import pdf from "vue-pdf";
export default {
metaInfo: {
title: "This is the test",
meta: [
{ charset: "utf-8" },
{
name: "viewport",
content:
"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes"
}
]
},
components: { pdf },
// props: ['pdfSrc'],
data() {
return {
currentPage: 0, // pdf文件页码
pageCount: 0, // pdf文件总页数
fileType: "pdf", // 文件类型
pdfSrc: this.$route.query.pathUrl, // pdf文件地址
name: "" // pdf文件地址
};
},
mounted() {
// 文件名
var a = this.$route.query.title;
var b = a.split(".");
this.name = b[0];
// 有时PDF文件地址会出现跨域的情况,这里最好处理一下
let CMAP_URL = "https://unpkg.com/pdfjs-dist@2.0.943/cmaps/"
this.pdfSrc = pdf.createLoadingTask({
url: this.$route.query.pathUrl,
cMapUrl: CMAP_URL,
cMapPacked: true,
});
},
methods: {
// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
changePdfPage(val) {
// console.log(val)
if (val === 0 && this.currentPage > 1) {
this.currentPage--;
// console.log(this.currentPage)
}
if (val === 1 && this.currentPage < this.pageCount) {
this.currentPage++;
// console.log(this.currentPage)
}
},
// pdf加载时
loadPdfHandler(e) {
this.currentPage = 1; // 加载的时候先加载第一页
},
goBack() {
let p = JSON.parse(localStorage.getItem("pdfid"));
// console.log(id);
this.$router.go(-1);
this.$router.push({
query: { title: p }
});
//
}
}
};
</script>
<style scoped>
.detail {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: hidden;
position: absolute;
background: #fff;
left: 50%;
/* position: relative; */
/* left: 50%; */
/* border: 1px solid red; */
}
.pdfTop {
height: 50px;
background: #1752db;
color: #fff;
line-height: 50px;
text-align: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.pdf {
margin-top: 50px;
position: absolute;
left: 0;
}
.pdf-box {
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 1024px;
width: 100%;
margin: 0 auto;
overflow-x: hidden;
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
font-size: 0.28rem;
}
.pdf-box span {
width: 100%;
}
.arrow {
width: 100%;
margin: auto;
font-size: 14px;
margin-top: 20px;
display: block;
position: fixed;
display: flex;
justify-content: center;
align-items: center;
/* border: 1px solid red; */
}
.pdfbox {
margin-left: -7%;
/* border: 1px solid red; */
transform: scale(1.1);
transform-origin: 0 0 0; /*以左上角为起点
/* height: 550px !important; */
}
.textpdf {
width: 70%;
margin: auto;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>