<template>
|
<div class="preview" v-if="this.preViewMd5">
|
<div id="imageParent" class="imageBox"></div>
|
<div class="bottom_tool">
|
<svg
|
@click="downloadPdf"
|
t="1718251204993"
|
class="icon"
|
viewBox="0 0 1024 1024"
|
version="1.1"
|
xmlns="http://www.w3.org/2000/svg"
|
p-id="4418"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
width="25"
|
height="25"
|
>
|
<path
|
d="M557 564.974l153.188-181.04c16.054-18.972 44.448-21.34 63.42-5.286 18.972 16.054 21.338 44.448 5.284 63.42L550.56 711.92a44.982 44.982 0 0 1-8.95 10.254 44.872 44.872 0 0 1-15.082 8.432A44.944 44.944 0 0 1 512 733c-16.264 0-30.512-8.628-38.42-21.556L245.65 442.068c-16.052-18.972-13.686-47.366 5.286-63.42 18.972-16.052 47.366-13.686 63.42 5.286l152.646 180.4V157c0-24.852 20.148-45 45-45s45 20.148 45 45v407.974zM823 630c0-24.852 20.148-45 45-45s45 20.148 45 45v238c0 24.87-20.176 45.026-45.046 45l-710-0.726c-24.834-0.026-44.954-20.166-44.954-45V630c0-24.852 20.148-45 45-45s45 20.148 45 45v192.32l620 0.634V630z"
|
p-id="4419"
|
></path>
|
</svg>
|
</div>
|
</div>
|
</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,
|
},
|
},
|
data() {
|
return {
|
currentPageSrc: "",
|
currentPage: 1,
|
totalPage: 1,
|
viewerCon: null,
|
preViewMd5: "",
|
};
|
},
|
watch: {
|
isClear: {
|
immediate: true,
|
handler(val) {
|
if (val == true) this.preViewMd5 = "";
|
},
|
},
|
md5: {
|
immediate: true,
|
handler(val) {
|
if (val) {
|
this.preViewMd5 = val;
|
this.currentPage = 1;
|
this.currentPageSrc = "";
|
this.totalPage = 1;
|
this.viewerCon?.destroy();
|
}
|
},
|
},
|
},
|
mounted() {
|
this.scrollBottom();
|
this.clearDom();
|
this.getFileInfo();
|
},
|
methods: {
|
async downloadPdf() {
|
window.open(await getResourcePath(this.preViewMd5));
|
},
|
domViewer() {
|
let ele = (this.container ? this.container : document).getElementById(
|
"imageParent"
|
);
|
this.viewerCon = new Viewer(ele, {
|
inline: false,
|
container: this.container
|
? this.container.querySelector("#app")
|
: "body",
|
navbar: true, // 显示导航栏
|
toolbar: true, // 显示工具栏
|
title: true, // 显示标题
|
});
|
},
|
clearDom() {
|
let ele = (this.container ? this.container : document).getElementById(
|
"imageParent"
|
);
|
ele.innerHtml = "";
|
},
|
createDom(page) {
|
var that = this;
|
let ele = (this.container ? this.container : 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();
|
};
|
ele.appendChild(img);
|
},
|
scrollBottom() {
|
var that = this;
|
var ele = (this.container ? this.container : document).getElementById(
|
"imageParent"
|
);
|
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.MG.file
|
.getPdfInfo({ md5: this.preViewMd5 })
|
.then((res) => {
|
this.totalPage = res.totalPages;
|
this.createDom(this.currentPage);
|
})
|
.catch((err) => {
|
this.totalPage = 1;
|
this.createDom(this.currentPage);
|
console.error(err);
|
});
|
},
|
getPageImage(page) {
|
const ctx = process.env.VUE_APP_API_URL;
|
return (
|
ctx +
|
"/file/GetPdfPageImage" +
|
"?md5=" +
|
this.preViewMd5 +
|
"&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: #ccc;
|
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: 10px;
|
fill: #999;
|
}
|
svg:hover {
|
fill: #fff;
|
cursor: pointer;
|
}
|
}
|
}
|
</style>
|
