<!--
|
* @Author: 小明丶
|
* @Date: 2020-06-23 16:31:23
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-07-01 11:28:29
|
* @Description:
|
-->
|
<template>
|
<div class="pdf" v-show="fileType === 'pdf'">
|
<v-navbar :title="$route.query.tit" :back='backUrl'></v-navbar>
|
<!-- <embed :src="pdfUrl" :style="{height: '100vh'}" style="width: 100%" /> -->
|
<pdf
|
:src="pdfSrc"
|
:page="currentPage"
|
@num-pages="pageCount=$event"
|
@page-loaded="currentPage=$event"
|
@loaded="loadPdfHandler"
|
></pdf>
|
<div 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>
|
</div>
|
</div>
|
</template>
|
<script>
|
import pdf from "vue-pdf";
|
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
|
export default {
|
metaInfo: {
|
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: "" // pdf文件地址
|
};
|
},
|
computed:{
|
backUrl(){
|
if(this.$route.query.from == 'login'){
|
return "/login?whichPage=1"
|
}else if(this.$route.query.from == 'sig'){
|
return "/order-handling/contract-signing?whichPage=1"
|
}
|
}
|
},
|
created() {
|
//this.pdfUrl = pdf.createLoadingTask({ url: data.url, CMapReaderFactory })
|
//this.pdfSrc = this.$route.query
|
// 有时PDF文件地址会出现跨域的情况,这里最好处理一下
|
//this.pdfUrl = './static/web/viewer.html?'
|
//this.pdfUrl = './static/web/viewer.html?file=' + 'https://t.finlean.com/jttech/M00/01/04/rBEX617ytmKAEKtoAAb34lu1n7Q194.pdf', +'PDF'
|
this.pdfSrc = pdf.createLoadingTask({url:this.$route.query.agrUrl,CMapReaderFactory});
|
},
|
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; // 加载的时候先加载第一页
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.pdf{
|
canvas{
|
height: 90vh;
|
}
|
.arrow{
|
&{
|
position: fixed;
|
width: 100%;
|
height: 50px;
|
text-align: center;
|
line-height: 50px;
|
background: #fcfcfc;
|
bottom: 0;
|
span:nth-of-type(1){
|
display: inline-block;
|
width: 30vw;
|
text-align: left;
|
}
|
span:nth-of-type(2){
|
display: inline-block;
|
width: 30vw;
|
text-align: right;
|
}
|
}
|
}
|
}
|
</style>
|
