<template>
|
<div class="preview" v-if="preViewMd5">
|
<div id="imageParent" class="imageBox"></div>
|
<div class="bottom_tool">
|
<!-- <svg
|
t="1718330411310"
|
@click="downloadPdf"
|
class="icon"
|
viewBox="0 0 1024 1024"
|
version="1.1"
|
xmlns="http://www.w3.org/2000/svg"
|
p-id="7121"
|
width="20"
|
height="20"
|
>
|
<path
|
d="M1022.955204 522.570753c0 100.19191-81.516572 181.698249-181.718715 181.698249l-185.637977 0c-11.2973 0-20.466124-9.168824-20.466124-20.466124 0-11.307533 9.168824-20.466124 20.466124-20.466124l185.637977 0c77.628008 0 140.786467-63.148226 140.786467-140.766001 0-77.423347-62.841234-140.448776-140.203182-140.766001-0.419556 0.030699-0.818645 0.051165-1.217734 0.061398-5.945409 0.143263-11.686157-2.292206-15.687284-6.702656-4.001127-4.400217-5.894244-10.335393-5.167696-16.250102 1.330298-10.806113 1.944282-19.760043 1.944282-28.192086 0-60.763922-23.658839-117.884874-66.617234-160.833035-42.968627-42.968627-100.089579-66.617234-160.843268-66.617234-47.368844 0-92.742241 14.449084-131.208321 41.781592-37.616736 26.738991-65.952084 63.700811-81.925894 106.884332-2.425236 6.538927-8.012488 11.399631-14.827707 12.893658-6.815219 1.483794-13.927197-0.603751-18.859533-5.54632-19.289322-19.330254-44.943608-29.972639-72.245418-29.972639-56.322773 0-102.146425 45.813419-102.146425 102.125959 0 0.317225 0.040932 0.982374 0.092098 1.627057 0.061398 0.920976 0.122797 1.831718 0.153496 2.762927 0.337691 9.465582-5.863545 17.928325-15.001669 20.455891-32.356942 8.933463-61.541635 28.550243-82.181721 55.217602-21.305235 27.516704-32.571836 60.508096-32.571836 95.41307 0 86.244246 70.188572 156.422585 156.443052 156.422585l169.981393 0c11.2973 0 20.466124 9.15859 20.466124 20.466124 0 11.2973-9.168824 20.466124-20.466124 20.466124l-169.981393 0c-108.828614 0-197.3753-88.536452-197.3753-197.354833 0-44.053332 14.223956-85.712127 41.126676-120.473839 22.809495-29.460985 53.897537-52.086285 88.710414-64.816215 5.065366-74.322729 67.149353-133.2447 142.751215-133.2447 28.386514 0 55.504128 8.217149 78.651314 23.52581 19.657712-39.868009 48.842405-74.169233 85.497233-100.212376 45.434795-32.295544 99.004875-49.354058 154.918325-49.354058 71.692832 0 139.087778 27.915793 189.782368 78.600149 50.694589 50.694589 78.610382 118.089535 78.610382 189.782368 0 3.704368-0.102331 7.470135-0.296759 11.368932C952.633602 352.568894 1022.955204 429.511287 1022.955204 522.570753zM629.258611 820.711014l-102.023628 102.013395c-3.990894 4.001127-9.230222 5.996574-14.46955 5.996574s-10.478655-1.995447-14.46955-5.996574l-102.023628-102.013395c-7.992021-7.992021-7.992021-20.947078 0-28.939099s20.947078-8.002254 28.939099 0l67.087954 67.077721 0-358.699522c0-11.2973 9.15859-20.466124 20.466124-20.466124 11.307533 0 20.466124 9.168824 20.466124 20.466124l0 358.699522 67.087954-67.077721c7.992021-8.002254 20.947078-7.992021 28.939099 0S637.250632 812.718993 629.258611 820.711014z"
|
p-id="7122"
|
></path>
|
</svg> -->
|
</div>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import Viewer from 'viewerjs'
|
import { requestCtx } from '../../assets/js/config'
|
import 'viewerjs/dist/viewer.css'
|
import { defineProps, inject, onMounted, ref, watch } from 'vue'
|
const props = defineProps<{ md5: String; title: String; isClear: Boolean }>()
|
const MG: any = inject('MG')
|
const currentPageSrc = ref<String>('')
|
const currentPage = ref<any>(1)
|
const totalPage = ref<Number>(1)
|
const viewerCon = ref<any>(null)
|
const preViewMd5 = ref<String>('')
|
|
onMounted(() => {
|
scrollBottom()
|
clearDom()
|
getFileInfo()
|
})
|
|
watch(
|
() => props.isClear,
|
(val) => {
|
if (val == true) {
|
preViewMd5.value = ''
|
totalPage.value = 1
|
viewerCon.value = null
|
preViewMd5.value = ''
|
currentPageSrc.value=''
|
}
|
},
|
{ immediate: true }
|
)
|
watch(
|
() => props.md5,
|
(val) => {
|
if (val) {
|
preViewMd5.value = val
|
currentPage.value = 1
|
currentPageSrc.value = ''
|
totalPage.value = 1
|
viewerCon.value?.destroy()
|
}
|
},
|
{ immediate: true }
|
)
|
const getResourcePath = async (md5, appRefCode = 'jingshieke') => {
|
let path = ''
|
await MG.file
|
.getAliVod({
|
md5,
|
appRefCode
|
})
|
.then((res) => {
|
if (res?.data != '' && res?.data != undefined) {
|
path = res.data
|
} else {
|
path = requestCtx + '/file/api/ApiDownload?md5=' + md5
|
}
|
})
|
return path
|
}
|
const downloadPdf = async () => {
|
window.open(await getResourcePath(preViewMd5.value))
|
}
|
const domViewer = () => {
|
let ele = document.getElementById('imageParent')
|
viewerCon.value = new Viewer(ele, {
|
inline: false,
|
container: 'body',
|
navbar: true, // 显示导航栏
|
toolbar: true, // 显示工具栏
|
title: true // 显示标题
|
})
|
}
|
const clearDom = () => {
|
let ele = document.getElementById('imageParent')
|
ele.innerHTML = ''
|
}
|
const createDom = (page) => {
|
let ele = document.getElementById('imageParent')
|
const img = document.createElement('img')
|
img.src = getPageImage(page)
|
img.alt = ''
|
img.style.maxWidth = '100%'
|
img.style.padding = '30px'
|
img.className = 'imgHover'
|
img.onclick = () => {
|
viewerCon.value?.destroy()
|
domViewer()
|
}
|
ele.appendChild(img)
|
}
|
const scrollBottom = () => {
|
var ele = document.getElementById('imageParent')
|
ele.addEventListener('scroll', function () {
|
// 计算滚动条距离底部的位置
|
const scrollBottom = ele.scrollHeight - ele.scrollTop - ele.clientHeight
|
if (scrollBottom <= 10) {
|
currentPage.value++
|
if (currentPage.value <= totalPage.value) {
|
createDom(currentPage.value)
|
}
|
}
|
})
|
}
|
const getFileInfo = () => {
|
// 获取目录
|
MG.file
|
.getPdfInfo({ md5: preViewMd5.value })
|
.then((res) => {
|
totalPage.value = JSON.parse(res).totalPages
|
createDom(currentPage.value)
|
})
|
.catch((err) => {
|
totalPage.value = 1
|
createDom(currentPage.value)
|
console.error(err)
|
})
|
}
|
const getPageImage = (page) => {
|
const ctx = requestCtx
|
return ctx + '/file/GetPdfPageImage' + '?md5=' + preViewMd5.value + '&index=' + page + '&dpi=200'
|
}
|
</script>
|
<style scoped lang="less">
|
.preview {
|
width: 100%;
|
height: 100%;
|
|
.imageBox {
|
height: calc(100% - 30px);
|
overflow-x: hidden;
|
overflow-y: auto;
|
// background-color: rgba(0, 0, 0, 0.5);
|
box-sizing: border-box;
|
}
|
|
.imageBox:hover {
|
cursor: zoom-in !important;
|
}
|
|
.bottom_tool {
|
height: 30px;
|
background-color: rgba(0, 0, 0, 0.8);
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
svg {
|
margin-right: 15px;
|
fill: #d1d1d1;
|
}
|
svg:hover {
|
fill: #fff;
|
cursor: pointer;
|
}
|
}
|
}
|
</style>
|
