md
This commit is contained in:
linfso
parent
b5fc4cd894
commit
3cc084933b
317
src/components/PdfViewer/pdfview_html.vue
Normal file
317
src/components/PdfViewer/pdfview_html.vue
Normal file
@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<div id="container">
|
||||
<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> -->
|
||||
<div style="width:100%;text-align: right;">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- <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">
|
||||
<!-- <div class="pdfview"> -->
|
||||
<!-- <pdf
|
||||
v-for="i in pageCount" :key="i"
|
||||
ref="pdf" id="pdf"
|
||||
:page="i"
|
||||
:src="pdfLoadUrl"
|
||||
style="width: 100%;margin-bottom: 10px;"
|
||||
@num-pages="currentPage=$event">
|
||||
</pdf> -->
|
||||
<!-- </div> -->
|
||||
<iframe style="width: 100%; height: 100%;" :src="pdfLoadUrl" frameborder="0"></iframe>
|
||||
|
||||
<!-- <pdf ref="pdf" id="pdf" :src="src" :page="currentPage" :rotate="pageRotate" @num-pages="pageCount = $event" @page-loaded="currentPage = $event" @loaded="loadPdfHandler"></pdf> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pdf from 'vue-pdf'
|
||||
|
||||
export default {
|
||||
name: "PdfViewer",
|
||||
props: {
|
||||
pdfUrl: {
|
||||
type: [String],
|
||||
required: false
|
||||
},
|
||||
},
|
||||
components: {
|
||||
pdf
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
created () {
|
||||
},
|
||||
destroyed () {
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isExit: false,
|
||||
value: 1,
|
||||
src: this.pdfUrl,
|
||||
pdfLoadUrl:null,
|
||||
currentPage: 0,
|
||||
pageCount: 0,
|
||||
scale: 100,
|
||||
pageRotate: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
pdfUrl(newVal) {
|
||||
console.log(this.pdfUrl)
|
||||
if(this.pdfUrl){
|
||||
// this.src=this.pdfUrl;
|
||||
this.pdfLoadUrl='/static/pdfjs/4.2.67/web/viewer.html?file=' + encodeURIComponent(this.pdfUrl)
|
||||
console.log(this.pdfLoadUrl)
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.loadPdfHandler();
|
||||
},
|
||||
methods: {
|
||||
async loadPdfHandler () {
|
||||
console.log(this.pdfUrl)
|
||||
this.pdfLoadUrl = pdf.createLoadingTask(this.pdfUrl);
|
||||
console.log(this.pdfLoadUrl)
|
||||
this.pdfLoadUrl.promise.then(pdf => {
|
||||
this.pageCount = pdf.numPages
|
||||
console.log(this.pageCount)
|
||||
})
|
||||
},
|
||||
|
||||
// pdf加载时
|
||||
// loadPdfHandler() {
|
||||
// this.value = this.currentPage = 1 // 加载的时候先加载第一页
|
||||
// },
|
||||
// 第一页
|
||||
FirstPage() {
|
||||
this.value = this.currentPage = 1
|
||||
this.isExit = false
|
||||
},
|
||||
// 最后一页
|
||||
lastPage() {
|
||||
this.value = this.currentPage = this.pageCount
|
||||
this.isExit = false
|
||||
},
|
||||
// 改变PDF页码,val 传过来区分上一页下一页的值,0 上一页,1 下一页
|
||||
changePdfPage(val) {
|
||||
if (val === 0 && this.currentPage > 1) {
|
||||
this.currentPage--
|
||||
}
|
||||
if (val === 1 && this.currentPage < this.pageCount) {
|
||||
this.currentPage++
|
||||
}
|
||||
this.value = this.currentPage
|
||||
this.isExit = false
|
||||
},
|
||||
// 页码选择
|
||||
pageSelect() {
|
||||
this.currentPage = this.value
|
||||
this.isExit = false
|
||||
},
|
||||
// 控制下拉选择框显示隐藏
|
||||
setIsExit() {
|
||||
this.isExit = true
|
||||
},
|
||||
// 放大
|
||||
scaleD() {
|
||||
this.scale += 5
|
||||
this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
|
||||
},
|
||||
// 缩小
|
||||
scaleX() {
|
||||
if (this.scale === 100) {
|
||||
return
|
||||
}
|
||||
this.scale += -5
|
||||
this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
|
||||
},
|
||||
// 顺时针
|
||||
clock() {
|
||||
this.pageRotate += 90
|
||||
},
|
||||
// 逆时针
|
||||
counterClock() {
|
||||
this.pageRotate -= 90
|
||||
},
|
||||
// 下载
|
||||
downPDF() {
|
||||
var url = this.src
|
||||
var tempLink = document.createElement('a')
|
||||
tempLink.style.display = 'none'
|
||||
tempLink.href = url
|
||||
tempLink.setAttribute('download', (new Date()).getTime()+'.pdf')
|
||||
// console.log(typeof tempLink.download,11111);
|
||||
if (typeof tempLink.download === 'undefined') {
|
||||
tempLink.setAttribute('target', '_blank')
|
||||
}
|
||||
document.body.appendChild(tempLink)
|
||||
tempLink.click()
|
||||
document.body.removeChild(tempLink)
|
||||
},
|
||||
// 打印
|
||||
printPDF() {
|
||||
// this.$refs.pdf.print()
|
||||
this.$emit("onPrint");
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
// display: flex;
|
||||
/* justify-content: center; */
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#container {
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
|
||||
font-family: PingFang SC;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: #e9e9e9;
|
||||
}
|
||||
|
||||
.main {
|
||||
border: 2px solid #dcdfe6;
|
||||
height: 100%;
|
||||
width:100%;
|
||||
overflow: auto;
|
||||
// max-height: 1000px;
|
||||
}
|
||||
|
||||
.pdfview {
|
||||
height: 100%;
|
||||
width:30%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tools {
|
||||
display: flex;
|
||||
background: #e1e1e1;
|
||||
width: 100%;
|
||||
z-index:9999;
|
||||
}
|
||||
|
||||
.total {
|
||||
width: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.main::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
/* 修改 滚动条的 下面 的 样式 */
|
||||
.main::-webkit-scrollbar-track {
|
||||
background-color: white;
|
||||
-webkit-border-radius: 2em;
|
||||
-moz-border-radius: 2em;
|
||||
border-radius: 2em;
|
||||
}
|
||||
|
||||
/* 修改 滑块 */
|
||||
.main::-webkit-scrollbar-thumb {
|
||||
background-color: #dcdfe6;
|
||||
-webkit-border-radius: 2em;
|
||||
-moz-border-radius: 2em;
|
||||
border-radius: 2em;
|
||||
}
|
||||
|
||||
:deep .el-dialog {
|
||||
height: 735px;
|
||||
font-family: '楷体';
|
||||
}
|
||||
|
||||
:deep .el-dialog__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #303133;
|
||||
}
|
||||
|
||||
:deep .el-dialog__title,
|
||||
:deep .el-dialog__headerbtn .el-dialog__close {
|
||||
color: white;
|
||||
}
|
||||
|
||||
:deep .el-dialog__body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
:deep .el-select {
|
||||
width: 95px;
|
||||
height: 28px;
|
||||
margin: 5px 20px 0px 20px;
|
||||
}
|
||||
</style>
|
||||
359
src/components/PdfViewer/tmp.vue
Normal file
359
src/components/PdfViewer/tmp.vue
Normal file
@ -0,0 +1,359 @@
|
||||
<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>
|
||||
|
||||
360
src/components/PdfViewer/viewer.vue
Normal file
360
src/components/PdfViewer/viewer.vue
Normal file
@ -0,0 +1,360 @@
|
||||
<template>
|
||||
<!-- v-if="pdfUrl" -->
|
||||
<div class="pdf-viewer grid2" >
|
||||
<div style="position: relative;">
|
||||
<div class="pdf-bar">
|
||||
<div class="zoom-minus" @click="zoomIn">
|
||||
<i class="el-icon-minus" title="缩小"></i>
|
||||
</div>
|
||||
<div class="scale" >
|
||||
<el-input v-model.number="scale" size="mini" @keyup.enter.native="setScaleValue">
|
||||
<template slot="append">%</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="zoom-plus" @click="zoomOut">
|
||||
<i class="el-icon-plus" title="放大"></i>
|
||||
</div>
|
||||
<div class="prev" @click="preFile">
|
||||
上一页
|
||||
</div>
|
||||
<div class="page">
|
||||
<el-input-number
|
||||
v-model.number="currentNum"
|
||||
:min="0"
|
||||
:max="fileCount"
|
||||
size="mini"
|
||||
/>
|
||||
</div>
|
||||
<div class="page-count">/ {{ fileCount }}</div>
|
||||
<div class="next" @click="nextFile">
|
||||
下一页
|
||||
</div>
|
||||
<div class="tools">
|
||||
<div style="width:100%;text-align: right;">
|
||||
<el-button title="下载" type="primary" icon="el-icon-download" @click="downPDF">下载</el-button>
|
||||
<el-button title="打印" type="primary" icon="el-icon-printer" @click="printPDF">打印</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="min-height:1600px;margin: 0 auto;overflow: auto;">
|
||||
<div class="pdf-wrapper">
|
||||
<!-- v-for="item in pdfList"
|
||||
:key="item.billCode"
|
||||
:src="item.pdfUrl" -->
|
||||
<pdf
|
||||
:src="currentPdfUrl"
|
||||
:page="page"
|
||||
@num-pages="pageCount = $event"
|
||||
@page-loaded="onPageLoaded($event)"
|
||||
ref="pdf"
|
||||
|
||||
></pdf>
|
||||
|
||||
<!-- v-drag -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import pdf from 'vue-pdf'
|
||||
export default {
|
||||
components: { pdf },
|
||||
props: {
|
||||
pdfList:{
|
||||
type: Array,
|
||||
},
|
||||
startPage: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
cacheFileList:this.pdfList,
|
||||
loadPdfUrl:null,
|
||||
page: 1,
|
||||
currentPage: 0,
|
||||
pageCount: 0,
|
||||
|
||||
currentNum:1,
|
||||
fileCount: this.pdfList.length,
|
||||
|
||||
scale: 20,
|
||||
preScale: 20,
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentPdfUrl() {
|
||||
if (!this.loadPdfUrl) return ''
|
||||
const publicPath =
|
||||
process.env.NODE_ENV === 'production'
|
||||
? process.env.VUE_APP_ROUTER_BASE
|
||||
: '/'
|
||||
return pdf.createLoadingTask({
|
||||
url: this.loadPdfUrl,
|
||||
cMapUrl: `${publicPath}cmaps/`,
|
||||
cMapPacked: true
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
pdfList(){
|
||||
console.log("===77777====>");
|
||||
this.cacheFileList=this.pdfList;
|
||||
// this.loadPdfUrl =this.cacheFileList[0].pdfUrl;
|
||||
this.fileCount=this.cacheFileList.length;
|
||||
// console.log(this.loadPdfUrl);
|
||||
},
|
||||
pageCount(value) {
|
||||
if (value) this.page = this.startPage
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if(this.cacheFileList&& this.cacheFileList.length>0){
|
||||
this.loadPdfUrl =this.pdfList[0].pdfUrl;
|
||||
}
|
||||
window.addEventListener('mousewheel', this.handleScroll, { passive: false })
|
||||
|
||||
},
|
||||
methods: {
|
||||
addPdfUrl(ydSn,pdfUrl){
|
||||
let item={
|
||||
"ydSn":ydSn,
|
||||
"pdfUrl":pdfUrl
|
||||
}
|
||||
this.pdfList.push(item);
|
||||
},
|
||||
handleScroll(e){
|
||||
// 判断是不是按下ctrl键
|
||||
if(e.ctrlKey) {
|
||||
// 取消浏览器默认的放大缩小网页行为
|
||||
e.preventDefault()
|
||||
// 判断是向上滚动还是向下滚动
|
||||
if (e.deltaY > 0) {
|
||||
// 放大重写，业务代码
|
||||
this.zoomOut()
|
||||
} else {
|
||||
// 缩小重写，业务代码
|
||||
this.zoomIn()
|
||||
}
|
||||
}
|
||||
},
|
||||
onPageLoaded(){
|
||||
this.doScale(20);
|
||||
},
|
||||
doScale(val){
|
||||
if (isNaN(val)) {
|
||||
this.scale = this.preScale
|
||||
return
|
||||
}
|
||||
if (val< 10) {
|
||||
this.scale = 10
|
||||
}
|
||||
if (val > 200) {
|
||||
this.scale = 200
|
||||
}
|
||||
this.preScale = this.scale
|
||||
// this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%';
|
||||
// this.$refs.pdf.$el.style.margin = "0 auto";
|
||||
|
||||
this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%';
|
||||
this.$refs.pdf.$el.style.margin = "0 auto";
|
||||
},
|
||||
setScaleValue(e) {
|
||||
this.doScale(e.target.value)
|
||||
},
|
||||
zoomIn() {
|
||||
if (this.scale > 20) {
|
||||
this.scale += -5
|
||||
this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
|
||||
this.$refs.pdf.$el.style.margin = "0 auto";
|
||||
}
|
||||
},
|
||||
zoomOut() {
|
||||
if (this.scale < 200) {
|
||||
this.scale += 5
|
||||
this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
|
||||
this.$refs.pdf.$el.style.margin = "0 auto";
|
||||
}
|
||||
},
|
||||
preFile(){
|
||||
let count = this.currentNum - 1
|
||||
if (count < 1) return
|
||||
this.currentNum = count
|
||||
this.loadPdfUrl =this.cacheFileList[this.currentNum-1].pdfUrl;
|
||||
},
|
||||
nextFile() {
|
||||
console.log('this.fileCount', this.currentNum, this.fileCount)
|
||||
let count = this.currentNum + 1
|
||||
if (count > this.fileCount) return
|
||||
this.currentNum = count
|
||||
this.loadPdfUrl =this.cacheFileList[this.currentNum-1].pdfUrl;
|
||||
},
|
||||
prePage() {
|
||||
let count = this.currentPage - 1
|
||||
if (count < 1) return
|
||||
this.page = count
|
||||
},
|
||||
nextPage() {
|
||||
console.log('this.pageCount', this.currentPage, this.pageCount)
|
||||
let count = this.currentPage + 1
|
||||
if (count > this.pageCount) return
|
||||
this.page = count
|
||||
},
|
||||
// 下载
|
||||
downPDF() {
|
||||
var tempLink = document.createElement('a')
|
||||
tempLink.style.display = 'none'
|
||||
tempLink.href = this.loadPdfUrl
|
||||
tempLink.setAttribute('download', (new Date()).getTime()+'.pdf')
|
||||
if (typeof tempLink.download === 'undefined') {
|
||||
tempLink.setAttribute('target', '_blank')
|
||||
}
|
||||
document.body.appendChild(tempLink)
|
||||
tempLink.click()
|
||||
document.body.removeChild(tempLink)
|
||||
},
|
||||
// 打印
|
||||
printPDF() {
|
||||
// this.$refs.pdf.print()
|
||||
this.$emit("onPrint");
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.grid1 {
|
||||
height: 200px;
|
||||
background-image:
|
||||
linear-gradient(45deg, #8d8b8b 25%, transparent 0),
|
||||
linear-gradient(-45deg, #8d8b8b 25%, transparent 0),
|
||||
linear-gradient(45deg, transparent 75%, #8d8b8b 0),
|
||||
linear-gradient(-45deg, transparent 75%, #8d8b8b 0);
|
||||
background-position: 0 0, 0 10px, 10px -10px, -10px 0;
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
.grid2 {
|
||||
height: 200px;
|
||||
background-image: radial-gradient(circle, rgb(165, 165, 165) 1px, #fff 1px);
|
||||
background-size: 20px 20px;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
|
||||
.grid3 {
|
||||
height: 200px;
|
||||
background-image:
|
||||
linear-gradient(to right, rgb(203 213 225) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgb(203 213 225) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.grid4 {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23fff' /%3E%3Crect x='50%' width='1' height='100%' fill='rgb(203 213 225)' /%3E%3Crect y='50%' width='100%' height='1' fill='rgb(203 213 225)' /%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
.pdf-viewer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// overflow: hidden;
|
||||
overflow: auto;
|
||||
// height: 100%;
|
||||
font-family: PingFang SC;
|
||||
// width: 100%;
|
||||
// position: relative;
|
||||
// background: #eeeeee;
|
||||
// background: #dcdcdc;
|
||||
|
||||
.tools {
|
||||
display: flex;
|
||||
z-index: 9999;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 30px;
|
||||
}
|
||||
.pdf-bar {
|
||||
position: absolute;
|
||||
// position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 1;
|
||||
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border: 1px solid #ddd;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
background: #f8f8f8;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
& > div {
|
||||
min-width: 36px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
i {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
}
|
||||
::v-deep .el-input--mini {
|
||||
input {
|
||||
padding: 0 8px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
.el-input-group__append {
|
||||
padding: 0 6px;
|
||||
color: #666;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
::v-deep .el-input-number {
|
||||
margin-left: 10px;
|
||||
width: 40px;
|
||||
.el-input-number__decrease {
|
||||
display: none;
|
||||
}
|
||||
.el-input-number__increase {
|
||||
display: none;
|
||||
}
|
||||
.el-input--mini {
|
||||
input {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.prev {
|
||||
margin-left: 16px;
|
||||
}
|
||||
.scale,
|
||||
.page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.page-count {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.pdf-wrapper {
|
||||
position: absolute;
|
||||
margin-top: 70px;
|
||||
width: 100%;
|
||||
height: calc(100% - 70px);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user