md
This commit is contained in:
linfso
parent
95ba216425
commit
b5fc4cd894
@ -1,359 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div id="container">
|
|
||||||
<div>
|
|
||||||
<div class="tools">
|
|
||||||
<el-button type="text" @click="FirstPage()">
|
|
||||||
<el-tooltip class="item" effect="light" content="第一页" placement="top">
|
|
||||||
<i class="el-icon-d-arrow-left"></i>
|
|
||||||
</el-tooltip>
|
|
||||||
</el-button>
|
|
||||||
<el-button type="text" @click="changePdfPage(0)">
|
|
||||||
<el-tooltip class="item" effect="light" content="上一页" placement="top">
|
|
||||||
<i class="el-icon-arrow-left"></i>
|
|
||||||
</el-tooltip>
|
|
||||||
</el-button>
|
|
||||||
<el-button type="text" @click="changePdfPage(1)">
|
|
||||||
<el-tooltip class="item" effect="light" content="下一页" placement="top">
|
|
||||||
<i class="el-icon-arrow-right"></i>
|
|
||||||
</el-tooltip>
|
|
||||||
</el-button>
|
|
||||||
<el-button type="text" @click="lastPage()">
|
|
||||||
<el-tooltip class="item" effect="light" content="最后一页" placement="top">
|
|
||||||
<i class="el-icon-d-arrow-right"></i>
|
|
||||||
</el-tooltip>
|
|
||||||
</el-button>
|
|
||||||
<el-button type="text" @click="setIsExit()" v-show="!isExit" style="margin-right:10px;">
|
|
||||||
<el-tooltip class="item" effect="light" content="页码选择" placement="top">
|
|
||||||
<i class="el-icon-setting"></i>
|
|
||||||
</el-tooltip>
|
|
||||||
</el-button>
|
|
||||||
<el-tooltip class="item" effect="light" content="页码选择" placement="top" v-show="isExit">
|
|
||||||
<el-select v-model="value" placeholder="请选择" @change="pageSelect" size="mini">
|
|
||||||
<el-option v-for="item in pageCount" :key="item" :label="'第 '+item+' 页'" :value="item"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-button type="text" @click="scaleD()">
|
|
||||||
<el-tooltip class="item" effect="light" content="放大" placement="top">
|
|
||||||
<i class="el-icon-zoom-in"></i>
|
|
||||||
</el-tooltip>
|
|
||||||
</el-button>
|
|
||||||
<el-button type="text" @click="scaleX()">
|
|
||||||
<el-tooltip class="item" effect="light" content="缩小" placement="top">
|
|
||||||
<i class="el-icon-zoom-out"></i>
|
|
||||||
</el-tooltip>
|
|
||||||
</el-button>
|
|
||||||
<el-button type="text" @click="clock()">
|
|
||||||
<el-tooltip class="item" effect="light" content="顺时针旋转" placement="top">
|
|
||||||
<i class="el-icon-refresh-right"></i>
|
|
||||||
</el-tooltip>
|
|
||||||
</el-button>
|
|
||||||
<el-button type="text" @click="counterClock()">
|
|
||||||
<el-tooltip class="item" effect="light" content="逆时针旋转" placement="top">
|
|
||||||
<i class="el-icon-refresh-left"></i>
|
|
||||||
</el-tooltip>
|
|
||||||
</el-button>
|
|
||||||
<el-button type="text" @click="downPDF">
|
|
||||||
<el-tooltip class="item" effect="light" content="下载" placement="top">
|
|
||||||
<i class="el-icon-download"></i>
|
|
||||||
</el-tooltip>
|
|
||||||
</el-button>
|
|
||||||
<el-button type="text" @click="printPDF">
|
|
||||||
<el-tooltip class="item" effect="light" content="打印" placement="top">
|
|
||||||
<i class="el-icon-printer"></i>
|
|
||||||
</el-tooltip>
|
|
||||||
</el-button>
|
|
||||||
<p class="total">
|
|
||||||
<el-tooltip class="item" effect="light" content="当前页" placement="top">
|
|
||||||
<b style="color:#F56C6C;cursor:pointer;">{{ currentPage }}</b> </el-tooltip> /
|
|
||||||
<el-tooltip class="item" effect="light" content="总页数" placement="top">
|
|
||||||
<b style="color:#67C23A;cursor:pointer;">{{ pageCount }}</b></el-tooltip>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="main">
|
|
||||||
<pdf ref="pdf" id="pdf" :src="src" :page="currentPage" :rotate="pageRotate" @num-pages="pageCount = $event" @page-loaded="currentPage = $event" @loaded="loadPdfHandler"></pdf>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 上一页、下一页 -->
|
|
||||||
<div class="right-btn">
|
|
||||||
<!-- 输入页码 -->
|
|
||||||
<div class="pageNum">
|
|
||||||
<input v-model.number="currentPage"
|
|
||||||
type="number"
|
|
||||||
class="inputNumber"
|
|
||||||
@input="inputEvent()"> / {{pageCount}}
|
|
||||||
</div>
|
|
||||||
<div @click="changePdfPage('first')"
|
|
||||||
class="turn">
|
|
||||||
首页
|
|
||||||
</div>
|
|
||||||
<!-- 在按钮不符合条件时禁用 -->
|
|
||||||
<div @click="changePdfPage('pre')"
|
|
||||||
class="turn-btn"
|
|
||||||
:style="currentPage===1?'cursor: not-allowed;':''">
|
|
||||||
上一页
|
|
||||||
</div>
|
|
||||||
<div @click="changePdfPage('next')"
|
|
||||||
class="turn-btn"
|
|
||||||
:style="currentPage===pageCount?'cursor: not-allowed;':''">
|
|
||||||
下一页
|
|
||||||
</div>
|
|
||||||
<div @click="changePdfPage('last')"
|
|
||||||
class="turn">
|
|
||||||
尾页
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="pdfArea">
|
|
||||||
<pdf :src="src"
|
|
||||||
ref="pdf"
|
|
||||||
v-show="loadedRatio===1"
|
|
||||||
:page="currentPage"
|
|
||||||
@num-pages="pageCount=$event"
|
|
||||||
@progress="loadedRatio = $event"
|
|
||||||
@page-loaded="currentPage=$event"
|
|
||||||
@loaded="loadPdfHandler"
|
|
||||||
@link-clicked="currentPage = $event"
|
|
||||||
style="display: inline-block;width:100%"
|
|
||||||
id="pdfID"></pdf>
|
|
||||||
</div>
|
|
||||||
<!-- 加载未完成时，展示进度条组件并计算进度 -->
|
|
||||||
<div class="progress"
|
|
||||||
v-show="loadedRatio!==1">
|
|
||||||
<el-progress type="circle"
|
|
||||||
:width="70"
|
|
||||||
color="#53a7ff"
|
|
||||||
:percentage="Math.floor(loadedRatio * 100)"></el-progress>
|
|
||||||
<br>
|
|
||||||
<!-- 加载提示语 -->
|
|
||||||
<span>{{remindShow}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import pdf from 'vue-pdf'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "PdfViewer",
|
|
||||||
props: {
|
|
||||||
pdfUrl: {
|
|
||||||
type: [String],
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
pdf
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
},
|
|
||||||
created () {
|
|
||||||
this.prohibit()
|
|
||||||
},
|
|
||||||
destroyed () {
|
|
||||||
// 在页面销毁时记得清空 setInterval
|
|
||||||
clearInterval(this.intervalID)
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
// 更改 loading 文字
|
|
||||||
this.intervalID = setInterval(() => {
|
|
||||||
this.remindShow === this.remindText.refresh
|
|
||||||
? this.remindShow = this.remindText.loading
|
|
||||||
: this.remindShow = this.remindText.refresh
|
|
||||||
}, 4000)
|
|
||||||
// 监听滚动条事件
|
|
||||||
this.listenerFunction()
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
// ----- loading -----
|
|
||||||
remindText: {
|
|
||||||
loading: '正在加载...',
|
|
||||||
refresh: '正在加载...'
|
|
||||||
},
|
|
||||||
remindShow: '正在加载...',
|
|
||||||
intervalID: '',
|
|
||||||
// ----- vuepdf -----
|
|
||||||
src: this.pdfUrl,
|
|
||||||
// 当前页数
|
|
||||||
currentPage: 0,
|
|
||||||
// 总页数
|
|
||||||
pageCount: 0,
|
|
||||||
// 加载进度
|
|
||||||
loadedRatio: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
pdfUrl(newVal) {
|
|
||||||
console.log(this.pdfUrl)
|
|
||||||
if(this.pdfUrl){
|
|
||||||
this.src=this.pdfUrl;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 监听滚动条事件
|
|
||||||
listenerFunction (e) {
|
|
||||||
// document.getElementById('container').addEventListener('scroll', true)
|
|
||||||
},
|
|
||||||
// 页面回到顶部
|
|
||||||
toTop () {
|
|
||||||
document.getElementById('container').scrollTop = 0
|
|
||||||
},
|
|
||||||
// 输入页码时校验
|
|
||||||
inputEvent () {
|
|
||||||
if (this.currentPage > this.pageCount) {
|
|
||||||
// 1. 大于max
|
|
||||||
this.currentPage = this.pageCount
|
|
||||||
} else if (this.currentPage < 1) {
|
|
||||||
// 2. 小于min
|
|
||||||
this.currentPage = 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 切换页数
|
|
||||||
changePdfPage (val) {
|
|
||||||
if (val === 'pre' && this.currentPage > 1) {
|
|
||||||
// 切换后页面回到顶部
|
|
||||||
this.currentPage--
|
|
||||||
this.toTop()
|
|
||||||
} else if (val === 'next' && this.currentPage < this.pageCount) {
|
|
||||||
this.currentPage++
|
|
||||||
this.toTop()
|
|
||||||
} else if (val === 'first') {
|
|
||||||
this.currentPage = 1
|
|
||||||
this.toTop()
|
|
||||||
} else if (val === 'last' && this.currentPage < this.pageCount) {
|
|
||||||
this.currentPage = this.pageCount
|
|
||||||
this.toTop()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// pdf加载时
|
|
||||||
loadPdfHandler (e) {
|
|
||||||
// 加载的时候先加载第一页
|
|
||||||
this.currentPage = 1
|
|
||||||
},
|
|
||||||
|
|
||||||
// 禁用鼠标右击、F12 来禁止打印和打开调试工具
|
|
||||||
prohibit () {
|
|
||||||
// console.log(document)
|
|
||||||
// document.oncontextmenu = function () {
|
|
||||||
// return false
|
|
||||||
// }
|
|
||||||
// document.onkeydown = function (e) {
|
|
||||||
// if (e.ctrlKey && (e.keyCode === 65 || e.keyCode === 67 || e.keyCode === 73 || e.keyCode === 74 || e.keyCode === 80 || e.keyCode === 83 || e.keyCode === 85 || e.keyCode === 86 || e.keyCode === 117)) {
|
|
||||||
// return false
|
|
||||||
// }
|
|
||||||
// if (e.keyCode === 18 || e.keyCode === 123) {
|
|
||||||
// return false
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
#container {
|
|
||||||
overflow: auto;
|
|
||||||
height: 100%;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
/* justify-content: center; */
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 右侧功能按钮区 */
|
|
||||||
.right-btn {
|
|
||||||
position: fixed;
|
|
||||||
right: 5%;
|
|
||||||
bottom: 15%;
|
|
||||||
width: 120px;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 99;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pdfArea {
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ------------------- 输入页码 ------------------- */
|
|
||||||
.pageNum {
|
|
||||||
margin: 10px 0;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
/*在谷歌下移除input[number]的上下箭头*/
|
|
||||||
input::-webkit-outer-spin-button,
|
|
||||||
input::-webkit-inner-spin-button {
|
|
||||||
-webkit-appearance: none !important;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
/*在firefox下移除input[number]的上下箭头*/
|
|
||||||
input[type='number'] {
|
|
||||||
-moz-appearance: textfield;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inputNumber {
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid #999999;
|
|
||||||
height: 35px;
|
|
||||||
font-size: 18px;
|
|
||||||
width: 60px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.inputNumber:focus {
|
|
||||||
border: 1px solid #00aeff;
|
|
||||||
background-color: rgba(18, 163, 230, 0.096);
|
|
||||||
outline: none;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ------------------- 切换页码 ------------------- */
|
|
||||||
.turn {
|
|
||||||
background-color: #888888;
|
|
||||||
opacity: 0.7;
|
|
||||||
color: #ffffff;
|
|
||||||
height: 70px;
|
|
||||||
width: 70px;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 5px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.turn-btn {
|
|
||||||
background-color: #000000;
|
|
||||||
opacity: 0.6;
|
|
||||||
color: #ffffff;
|
|
||||||
height: 70px;
|
|
||||||
width: 70px;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin: 5px 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.turn-btn:hover,
|
|
||||||
.turn:hover {
|
|
||||||
transition: 0.3s;
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ------------------- 进度条 ------------------- */
|
|
||||||
.progress {
|
|
||||||
position: absolute;
|
|
||||||
right: 50%;
|
|
||||||
top: 50%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.progress > span {
|
|
||||||
color: #199edb;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user