<!-- @format -->
|
<template>
|
<el-dialog :visible.sync="localDialogVisible" @open="hadleOpenDialog" width="60vw" top="2vh" append-to-body
|
lock-scroll :show-close="false" class="custom-dialog">
|
<div slot="title" class="header_title">
|
<span>{{ pdfTitle }}</span>
|
<span @click="closeDialog"> x </span>
|
</div>
|
<div class="pdfModal" v-if="localDialogVisible">
|
<!-- 原有的内容 -->
|
<div class="pdfBox-component">
|
<div class="preview" v-if="this.preViewMd5">
|
<div id="imageParent" class="imageBox"></div>
|
<div class="bottom_tool">
|
</div>
|
</div>
|
<div class="notBox" v-if="totalPage == 0 && !loading">
|
<el-empty description="暂无数据"></el-empty>
|
</div>
|
<div class="notBox" v-if="loading" v-loading="loading"></div>
|
</div>
|
</div>
|
</el-dialog>
|
|
</template>
|
<script>
|
import Viewer from 'viewerjs'
|
import 'viewerjs/dist/viewer.css'
|
import { getResourcePath } from '@/assets/methods/resources'
|
export default {
|
name: 'pdf_view',
|
props: {
|
md5: {
|
type: String,
|
},
|
title: {
|
type: String,
|
},
|
isClear: {
|
type: Boolean,
|
default: false,
|
},
|
pdfTitle: {
|
type: String,
|
}
|
},
|
data() {
|
return {
|
localDialogVisible: false,
|
currentPageSrc: '',
|
currentPage: 1,
|
totalPage: 1,
|
viewerCon: null,
|
preViewMd5: '',
|
loading: false,
|
}
|
},
|
watch: {
|
|
// md5: {
|
// immediate: true,
|
// handler(val) {
|
// if (val) {
|
// // this.preViewMd5 = val
|
// this.currentPage = 1
|
// this.currentPageSrc = ''
|
// this.totalPage = 1
|
// this.viewerCon?.destroy()
|
// }
|
// },
|
// },
|
// dialogVisibleProp(newVal) {
|
// this.localDialogVisible = newVal;
|
// if (newVal) {
|
// this.currentPage = 1;
|
// this.loading = true;
|
// this.clearDom();
|
// this.getFileInfo();
|
// this.$nextTick(() => {
|
// this.scrollBottom()
|
// });
|
// } else {
|
// this.viewerCon?.destroy();
|
// }
|
// },
|
|
},
|
methods: {
|
hadleOpenDialog() {
|
this.preViewMd5 = this.md5
|
this.currentPage = 1
|
this.currentPageSrc = ''
|
this.totalPage = 1
|
this.viewerCon?.destroy()
|
this.loading = true;
|
this.clearDom();
|
this.getFileInfo();
|
this.$nextTick(() => {
|
this.scrollBottom()
|
});
|
},
|
closeDialog() {
|
this.localDialogVisible = false
|
},
|
openDialog() {
|
this.localDialogVisible = true
|
},
|
async downloadPdf() {
|
window.open(await getResourcePath(this.preViewMd5))
|
},
|
domViewer() {
|
// let ele = (this.container ? this.container : document).getElementById(
|
// 'imageParent'
|
// )
|
let ele = document.getElementById('imageParent')
|
if (ele) {
|
this.viewerCon = new Viewer(ele, {
|
inline: false,
|
container: this.container
|
? this.container.querySelector('#app')
|
: 'body',
|
navbar: true, // 显示导航栏
|
toolbar: true, // 显示工具栏
|
title: true, // 显示标题
|
})
|
}
|
},
|
clearDom() {
|
let ele = document.getElementById('imageParent')
|
if (ele) {
|
ele.innerHTML = ''
|
}
|
},
|
createDom(page) {
|
var that = this
|
let ele = document.getElementById('imageParent')
|
const img = document.createElement('img')
|
img.src = this.getPageImage(page)
|
img.alt = ''
|
img.style.maxWidth = '90%'
|
img.style.padding = '30px 5%'
|
img.className = 'imgHover'
|
img.onclick = () => {
|
that.viewerCon?.destroy()
|
that.domViewer()
|
}
|
if (ele) {
|
ele.appendChild(img)
|
}
|
},
|
scrollBottom() {
|
var that = this
|
var ele = document.getElementById('imageParent')
|
if (ele) {
|
ele.addEventListener('scroll', function () {
|
// 计算滚动条距离底部的位置
|
const scrollBottom = ele.scrollHeight - ele.scrollTop - ele.clientHeight
|
if (scrollBottom <= 10) {
|
that.currentPage++
|
if (that.currentPage <= that.totalPage) {
|
that.createDom(that.currentPage, ele)
|
}
|
}
|
});
|
}
|
},
|
getFileInfo() {
|
// 获取目录
|
this.loading = true
|
this.MG.file
|
.getPdfInfo({ md5: this.preViewMd5 })
|
.then((res) => {
|
try {
|
if (typeof res === 'string' && res !== null) {
|
this.totalPage = JSON.parse(res).totalPages
|
} else if (typeof res === 'object' && res !== null) {
|
this.totalPage = res.totalPages
|
}
|
} catch (error) {
|
console.log(error, 'pdf返回值类型错误');
|
}
|
this.createDom(this.currentPage)
|
this.loading = false
|
})
|
.catch((err) => {
|
this.totalPage = 0
|
this.createDom(this.currentPage)
|
console.error(err)
|
this.loading = false
|
})
|
},
|
getPageImage(page) {
|
const ctx = process.env.VUE_APP_API_URL
|
return (
|
ctx +
|
'/file/GetPdfPageImage' +
|
'?md5=' +
|
this.preViewMd5 +
|
'&index=' +
|
page +
|
'&dpi=200'
|
)
|
},
|
},
|
}
|
</script>
|
