优化

unknown

2024-06-12 b36d06e85eff7302df612d19ff0810e1a3b304d5

 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>