From b36d06e85eff7302df612d19ff0810e1a3b304d5 Mon Sep 17 00:00:00 2001
From: unknown <qq1940665526@163.com>
Date: 星期三, 12 六月 2024 11:07:15 +0800
Subject: [PATCH] 优化
---
src/components/pdfview/index.vue | 167 ++++++++++++++++++++-----------------------------------
1 files changed, 60 insertions(+), 107 deletions(-)
diff --git a/src/components/pdfview/index.vue b/src/components/pdfview/index.vue
index 04edf5e..72522a5 100644
--- a/src/components/pdfview/index.vue
+++ b/src/components/pdfview/index.vue
@@ -1,10 +1,11 @@
<template>
- <div class="imgbox">
+ <div ref="imageBox" class="imageBox">
<img
+ id="image"
ref="image"
- :onLoad="initFun"
- :onDragStart="dragStart"
- :onWheel="handleScroll"
+ @onload="initFun"
+ @ondragstart="dragStart"
+ @onwheel="handleScroll"
:src="currentPageSrc"
alt=""
/>
@@ -51,40 +52,47 @@
},
},
},
- created(){
+ created() {
this.getFileInfo();
+ },
+ mounted(){
+ // this.initFun()
},
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";
+ // 鍒濆鍖栨嫋鎷�
+ 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;
}
- };
- image.onmouseup = function () {
- canMove = false;
- };
- this.fileLoading = false;
},
dragStart(e) {
+ console.log(e,'dragStart')
if (e && e.preventDefault) {
e.preventDefault();
} else {
@@ -92,98 +100,39 @@
}
},
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 + "%";
+ this.$refs.image.style.height = newZoom * 100 + "%";
}
} else {
if (this.zoom > 0.5) {
let newZoom = this.zoom - 0.1;
this.zoom = newZoom;
- this.refs.image.style.height = newZoom * 100 + "%";
+ 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.md5 })
+ .then((res) => {
+ this.totalPage = res.totalPages;
+ this.getPageImage(this.currentPage);
+ })
+ .catch((err) => {
+ console.error(err);
+ });
},
getPageImage(page) {
- console.log(page, "page");
const ctx = process.env.VUE_APP_API_URL;
this.fileLoading = true;
this.currentPageSrc =
ctx +
- "/file/Preview/GetPageImage" +
+ "/file/GetPdfPageImage" +
"?md5=" +
this.md5 +
"&index=" +
@@ -194,12 +143,16 @@
};
</script>
<style scoped lang="less">
-.imgbox {
+.imageBox {
width: 100%;
- height: 100%;
- background-color: aquamarine;
+ height: 300px;
+ overflow: auto;
+ position: relative;
img {
- width: 100%;
+ position: absolute;
+ width: auto;
+ height: 100%;
+ transition: transform 0.5s, width 0.3s, height 0.3s;
}
}
</style>
--
Gitblit v1.9.1