From 1695fcd442fe2cefb6d3b63869ad8a72ebd5210a Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期五, 04 七月 2025 23:57:18 +0800
Subject: [PATCH] 测试图书 7.4
---
src/components/pdfview/index.vue | 257 ++++++++++++++++++++++++++++-----------------------
1 files changed, 141 insertions(+), 116 deletions(-)
diff --git a/src/components/pdfview/index.vue b/src/components/pdfview/index.vue
index 4e64d88..845bf08 100644
--- a/src/components/pdfview/index.vue
+++ b/src/components/pdfview/index.vue
@@ -1,26 +1,25 @@
+<!-- @format -->
<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>
+ <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>
+ <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";
@@ -39,72 +38,104 @@
type: Boolean,
default: false,
},
+ pdfTitle: {
+ type: String,
+ },
},
data() {
return {
+ localDialogVisible: false,
currentPageSrc: "",
- currentPage: 1,
+ currentPage: 3,
totalPage: 1,
viewerCon: null,
preViewMd5: "",
+ loading: false,
};
},
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();
+ // 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 = 3;
+ 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"
- );
- this.viewerCon = new Viewer(ele, {
- inline: false,
- container: this.container
- ? this.container.querySelector("#app")
- : "body",
- navbar: true, // 鏄剧ず瀵艰埅鏍�
- toolbar: true, // 鏄剧ず宸ュ叿鏍�
- title: true, // 鏄剧ず鏍囬
- });
+ // 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 = (this.container ? this.container : document).getElementById(
- "imageParent"
- );
- ele.innerHtml = "";
+ let ele = document.getElementById("imageParent");
+ if (ele) {
+ ele.innerHTML = "";
+ }
},
createDom(page) {
var that = this;
- let ele = (this.container ? this.container : document).getElementById(
- "imageParent"
- );
+ 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%";
@@ -113,39 +144,67 @@
that.viewerCon?.destroy();
that.domViewer();
};
- ele.appendChild(img);
+ if (ele) {
+ 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);
+ 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);
+ }
+ }
}
- }
- });
+ lastScrollTop = scrollTop;
+ });
+ }
},
+
+
getFileInfo() {
// 鑾峰彇鐩綍
+ this.loading = true;
this.MG.file
.getPdfInfo({ md5: this.preViewMd5 })
.then((res) => {
- this.totalPage = res.totalPages;
- this.createDom(this.currentPage);
+ 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杩斿洖鍊肩被鍨嬮敊璇�");
+ }
+ const maxPages = Math.min(3, this.totalPage);
+ for (let i = 0; i < maxPages; i++) {
+ this.createDom(i + 1);
+ }
+ this.loading = false;
})
.catch((err) => {
- this.totalPage = 1;
+ this.totalPage = 0;
this.createDom(this.currentPage);
console.error(err);
+ this.loading = false;
});
},
+
getPageImage(page) {
const ctx = process.env.VUE_APP_API_URL;
return (
@@ -161,37 +220,3 @@
},
};
</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>
--
Gitblit v1.9.1