From e3bd495770ee8e57d208de3d17aabe6e62bae6ae Mon Sep 17 00:00:00 2001
From: unknown <qq1940665526@163.com>
Date: 星期二, 25 六月 2024 10:28:00 +0800
Subject: [PATCH] 优化
---
src/components/pdfview/index.vue | 224 +++++++++++++++++++++++++++++++------------------------
1 files changed, 126 insertions(+), 98 deletions(-)
diff --git a/src/components/pdfview/index.vue b/src/components/pdfview/index.vue
index 72522a5..74fe752 100644
--- a/src/components/pdfview/index.vue
+++ b/src/components/pdfview/index.vue
@@ -1,17 +1,30 @@
<template>
- <div ref="imageBox" class="imageBox">
- <img
- id="image"
- ref="image"
- @onload="initFun"
- @ondragstart="dragStart"
- @onwheel="handleScroll"
- :src="currentPageSrc"
- alt=""
- />
+ <div class="preview" v-if="this.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>
+import Viewer from "viewerjs";
+import "viewerjs/dist/viewer.css";
+import { getResourcePath } from "@/assets/methods/resources";
export default {
name: "pdf_view",
props: {
@@ -21,138 +34,153 @@
title: {
type: String,
},
+ isClear: {
+ type: Boolean,
+ default: false,
+ },
},
data() {
return {
currentPageSrc: "",
- fileLoading: false,
- visible: true,
- close: null,
currentPage: 1,
totalPage: 1,
- rcViewerOptions: {
- // inline: true
- },
- zoom: 1,
- catalogVisible: false,
- tocData: [],
- generateList: [],
- expandedKeys: [],
- searchValue: "",
- autoExpandParent: true,
- drawerSize: "default",
+ viewerCon: null,
+ preViewMd5: "",
};
},
watch: {
+ isClear: {
+ immediate: true,
+ handler(val) {
+ if (val == true) this.preViewMd5 = "";
+ },
+ },
md5: {
- handler(newVal, oldVal) {
- if (newVal) {
- this.getFileInfo();
+ immediate: true,
+ handler(val) {
+ if (val) {
+ this.preViewMd5 = val;
+ this.currentPage = 1;
+ this.currentPageSrc = "";
+ this.totalPage = 1;
+ this.viewerCon?.destroy();
}
},
},
},
- created() {
+ mounted() {
+ this.scrollBottom();
+ this.clearDom();
this.getFileInfo();
},
- mounted(){
- // this.initFun()
- },
methods: {
- initFun() {
- // 鍒濆鍖栨嫋鎷�
- let image = this.$refs.image;
- console.log(this,8989);
- if (image) {
- let imageBox = this.$refs.imageBox;
- let initLeft = imageBox.offsetWidth / 2 - image.offsetWidth / 2;
- image.style.left = 0 + "px";
- image.style.top = 0 + "px";
- let canMove = false;
- let offsetX, offsetY, oldLeft, oldTop;
- image.onmousedown = function (e) {
- canMove = true;
- offsetX = e.x;
- offsetY = e.y;
- oldLeft = parseFloat(image.style.left.split("px")[0]);
- oldTop = parseFloat(image.style.top.split("px")[0]);
- };
- imageBox.onmousemove = function (e) {
- if (canMove == true) {
- let left = e.clientX - offsetX;
- let top = e.clientY - offsetY;
- image.style.left = oldLeft + left + "px";
- image.style.top = oldTop + top + "px";
- }
- };
- image.onmouseup = function () {
- canMove = false;
- };
- this.fileLoading = false;
- }
+ async downloadPdf() {
+ window.open(await getResourcePath(this.preViewMd5));
},
- dragStart(e) {
- console.log(e,'dragStart')
- if (e && e.preventDefault) {
- e.preventDefault();
- } else {
- window.event.returnValue = false;
- }
+ domViewer() {
+ let ele = document.getElementById("imageParent");
+ this.viewerCon = new Viewer(ele, {
+ inline: false,
+ container: "body",
+ navbar: true, // 鏄剧ず瀵艰埅鏍�
+ toolbar: true, // 鏄剧ず宸ュ叿鏍�
+ title: true, // 鏄剧ず鏍囬
+ });
},
- handleScroll(e) {
- console.log(e,'handleScroll')
- if (e.nativeEvent.deltaY <= 0) {
- if (this.zoom < 3) {
- let newZoom = this.zoom + 0.1;
- this.zoom = newZoom;
- this.$refs.image.style.height = newZoom * 100 + "%";
+ clearDom() {
+ let ele = document.getElementById("imageParent");
+ 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();
+ };
+ ele.appendChild(img);
+ },
+ scrollBottom() {
+ var that = this;
+ var ele = 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);
+ }
}
- } else {
- if (this.zoom > 0.5) {
- let newZoom = this.zoom - 0.1;
- this.zoom = newZoom;
- this.$refs.image.style.height = newZoom * 100 + "%";
- }
- }
+ });
},
getFileInfo() {
// 鑾峰彇鐩綍
this.MG.file
- .getPdfInfo({ md5: this.md5 })
+ .getPdfInfo({ md5: this.preViewMd5 })
.then((res) => {
this.totalPage = res.totalPages;
- this.getPageImage(this.currentPage);
+ 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;
- this.fileLoading = true;
- this.currentPageSrc =
+ return (
ctx +
"/file/GetPdfPageImage" +
"?md5=" +
- this.md5 +
+ this.preViewMd5 +
"&index=" +
page +
- "&dpi=150";
+ "&dpi=200"
+ );
},
},
};
</script>
<style scoped lang="less">
-.imageBox {
+.preview {
width: 100%;
- height: 300px;
- overflow: auto;
- position: relative;
- img {
- position: absolute;
- width: auto;
- height: 100%;
- transition: transform 0.5s, width 0.3s, height 0.3s;
+ 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: 15px;
+ fill: #d1d1d1;
+ }
+ svg:hover {
+ fill: #fff;
+ cursor: pointer;
+ }
}
}
</style>
--
Gitblit v1.9.1