From c0e4157169e151fe4ada71d3abbd82aa78c4d71e Mon Sep 17 00:00:00 2001
From: unknown <qq1940665526@163.com>
Date: 星期四, 13 六月 2024 14:11:35 +0800
Subject: [PATCH] 优化
---
src/components/pdfview/index.vue | 296 ++++++++++++++++++++++++++++------------------------------
1 files changed, 144 insertions(+), 152 deletions(-)
diff --git a/src/components/pdfview/index.vue b/src/components/pdfview/index.vue
index 04edf5e..4e64d88 100644
--- a/src/components/pdfview/index.vue
+++ b/src/components/pdfview/index.vue
@@ -1,16 +1,31 @@
<template>
- <div class="imgbox">
- <img
- 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
+ @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: {
@@ -20,186 +35,163 @@
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();
},
methods: {
- initFun() {
- // 鍒濆鍖栨嫋鎷�
- let image = this.refs.image;
- let imageBox = this.refs.imageBox;
- let initLeft = imageBox.offsetWidth / 2 - image.offsetWidth / 2;
- image.style.left = initLeft + "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) {
- if (e && e.preventDefault) {
- e.preventDefault();
- } else {
- window.event.returnValue = false;
- }
+ 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, // 鏄剧ず鏍囬
+ });
},
- handleScroll(e) {
- 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 = (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);
+ }
}
- } 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
- // .GetPdfToc({ md5: this.md5 })
- // .then((tocRes) => {
- // console.log(tocRes, "3232---3232----32");
- // if (tocRes && tocRes.length && tocRes[0]) {
- // let tocDataList = [];
- // for (let i = 0; i < tocRes.length; i++) {
- // const tacItem = tocRes[i];
- // if (tacItem) {
- // let itemInfo = tacItem.split(" ");
- // let obj = {
- // page: itemInfo[0],
- // level: itemInfo[1],
- // title: itemInfo[2] + " ( " + itemInfo[0] + " )",
- // children: [],
- // };
- // tocDataList.push(obj);
- // }
- // }
- // let cLevel = 0;
- // let tocData = [];
- // let generateList = []; // 鐢ㄤ簬妫�绱㈢殑Data
- // let memorySrc = null;
- // for (let j = 0; j < tocDataList.length; j++) {
- // const tocItem = tocDataList[j];
- // if (tocItem.level == 0) {
- // tocItem.key = tocData.length;
- // tocData.push(tocItem);
- // generateList.push(tocItem);
- // cLevel = 0;
- // } else if (tocItem.level == cLevel) {
- // tocItem.key = memorySrc.key + "-" + memorySrc.children.length;
- // memorySrc.children.push(tocItem);
- // generateList.push(tocItem);
- // } else if (tocItem.level > cLevel) {
- // memorySrc = this.handleDocData(tocData, cLevel);
- // tocItem.key = memorySrc.key + "-" + memorySrc.children.length;
- // memorySrc.children.push(tocItem);
- // generateList.push(tocItem);
- // cLevel = tocItem.level;
- // } else if (tocItem.level < cLevel) {
- // memorySrc = this.handleDocData(tocData, tocItem.level - 1);
- // tocItem.key = memorySrc.key + "-" + memorySrc.children.length;
- // memorySrc.children.push(tocItem);
- // generateList.push(tocItem);
- // cLevel = tocItem.level;
- // }
- // }
- // this.tocData = tocData;
- // this.generateList = generateList;
- // console.log(tocData, generateList, 1221212121211);
- // }
-
- // 鑾峰彇鎬婚〉鏁�
- this.MG.file
- .getPdfInfo({ md5: this.md5 })
- .then((res) => {
- console.log(res, 79879879879797979);
- this.totalPage = res.totalPages;
- this.getPageImage(this.currentPage - 1);
- })
- .catch((err) => {
- console.error(err);
- });
- // })
- // .catch((err) => {
- // console.error(err);
- // });
+ 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) {
- console.log(page, "page");
const ctx = process.env.VUE_APP_API_URL;
- this.fileLoading = true;
- this.currentPageSrc =
+ return (
ctx +
- "/file/Preview/GetPageImage" +
+ "/file/GetPdfPageImage" +
"?md5=" +
- this.md5 +
+ this.preViewMd5 +
"&index=" +
page +
- "&dpi=150";
+ "&dpi=200"
+ );
},
},
};
</script>
<style scoped lang="less">
-.imgbox {
+.preview {
width: 100%;
height: 100%;
- background-color: aquamarine;
- img {
- width: 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