From 7d7744fe006714f6be0341d03d4de9b1e90d775d Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期五, 23 五月 2025 22:45:09 +0800
Subject: [PATCH] 5.23 婴幼儿游戏活动实施（wb）
---
src/components/pdfview/index.vue | 194 +++++++++++++++++++++++++++---------------------
1 files changed, 108 insertions(+), 86 deletions(-)
diff --git a/src/components/pdfview/index.vue b/src/components/pdfview/index.vue
index 163122c..a712e0f 100644
--- a/src/components/pdfview/index.vue
+++ b/src/components/pdfview/index.vue
@@ -1,7 +1,15 @@
<!-- @format -->
<template>
- <el-dialog :visible.sync="localDialogVisible" @open="hadleOpenDialog" width="60vw" top="2vh" append-to-body
- lock-scroll :show-close="false" class="custom-dialog">
+ <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>
@@ -11,8 +19,7 @@
<div class="pdfBox-component">
<div class="preview" v-if="this.preViewMd5">
<div id="imageParent" class="imageBox"></div>
- <div class="bottom_tool">
- </div>
+ <div class="bottom_tool"></div>
</div>
<div class="notBox" v-if="totalPage == 0 && !loading">
<el-empty description="鏆傛棤鏁版嵁"></el-empty>
@@ -21,14 +28,13 @@
</div>
</div>
</el-dialog>
-
</template>
<script>
-import Viewer from 'viewerjs'
-import 'viewerjs/dist/viewer.css'
-import { getResourcePath } from '@/assets/methods/resources'
+import Viewer from "viewerjs";
+import "viewerjs/dist/viewer.css";
+import { getResourcePath } from "@/assets/methods/resources";
export default {
- name: 'pdf_view',
+ name: "pdf_view",
props: {
md5: {
type: String,
@@ -42,21 +48,20 @@
},
pdfTitle: {
type: String,
- }
+ },
},
data() {
return {
localDialogVisible: false,
- currentPageSrc: '',
+ currentPageSrc: "",
currentPage: 1,
totalPage: 1,
viewerCon: null,
- preViewMd5: '',
+ preViewMd5: "",
loading: false,
- }
+ };
},
watch: {
-
// md5: {
// immediate: true,
// handler(val) {
@@ -83,124 +88,141 @@
// this.viewerCon?.destroy();
// }
// },
-
},
methods: {
hadleOpenDialog() {
- this.preViewMd5 = this.md5
- this.currentPage = 1
- this.currentPageSrc = ''
- this.totalPage = 1
- this.viewerCon?.destroy()
+ 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()
+ this.scrollBottom();
});
},
closeDialog() {
- this.localDialogVisible = false
+ this.localDialogVisible = false;
},
openDialog() {
- this.localDialogVisible = true
+ this.localDialogVisible = true;
},
async downloadPdf() {
- window.open(await getResourcePath(this.preViewMd5))
+ 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')
+ let ele = document.getElementById("imageParent");
if (ele) {
this.viewerCon = new Viewer(ele, {
inline: false,
container: this.container
- ? this.container.querySelector('#app')
- : 'body',
+ ? 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)
- }
- }
});
}
},
+ 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.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
+ 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杩斿洖鍊肩被鍨嬮敊璇�');
+ console.log(error, "pdf杩斿洖鍊肩被鍨嬮敊璇�");
}
- this.createDom(this.currentPage)
- this.loading = false
+ 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
- })
+ this.totalPage = 0;
+ this.createDom(this.currentPage);
+ console.error(err);
+ this.loading = false;
+ });
},
getPageImage(page) {
- const ctx = process.env.VUE_APP_API_URL
+ const ctx = process.env.VUE_APP_API_URL;
return (
ctx +
- '/file/GetPdfPageImage' +
- '?md5=' +
+ "/file/GetPdfPageImage" +
+ "?md5=" +
this.preViewMd5 +
- '&index=' +
+ "&index=" +
page +
- '&dpi=200'
- )
+ "&dpi=200"
+ );
},
},
-}
+};
</script>
--
Gitblit v1.9.1