<!-- @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() {
|
console.log(await getResourcePath(this.preViewMd5), "12345");
|
|
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);
|
// 手动触发滚动事件
|
// ele.dispatchEvent(new Event("scroll"));
|
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() {
|
const ele = document.getElementById("imageParent");
|
if (ele) {
|
let lastScrollTop = 0;
|
ele.addEventListener("scroll", () => {
|
const scrollTop = ele.scrollTop;
|
const scrollBottom = ele.scrollHeight - scrollTop - ele.clientHeight;
|
if (scrollBottom < 10 && scrollTop > lastScrollTop) {
|
console.log(
|
"滚动到底部，当前页：",
|
this.currentPage,
|
"总页数：",
|
this.totalPage
|
);
|
if (this.currentPage < this.totalPage) {
|
this.currentPage++;
|
if (this.currentPage <= this.totalPage) {
|
this.createDom(this.currentPage, ele);
|
}
|
}
|
}
|
lastScrollTop = scrollTop;
|
});
|
}
|
},
|
|
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返回值类型错误");
|
}
|
Math.min(3, res.totalPages);
|
for (let i = 0; i <= Math.min(3, res.totalPages); i++) {
|
this.createDom(i + 1);
|
}
|
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>
|
