优化

zhongshujie

13 小时以前 8aa7796f70c4a7903fb85431eaf95e881c6c067d

 src/components/pdfview/index.vue

@@ -1,18 +1,34 @@
<!-- @format -->
<template>
  <div class="imgbox">
    <img
      ref="image"
      :onLoad="initFun"
      :onDragStart="dragStart"
      :onWheel="handleScroll"
      :src="currentPageSrc"
      alt=""
    />
  </div>
  <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 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'
import 'viewerjs/dist/viewer.css'
import { getResourcePath } from '@/assets/methods/resources'
export default {
  name: "pdf_view",
  name: 'pdf_view',
  props: {
    md5: {
      type: String,
@@ -20,186 +36,175 @@
    title: {
      type: String,
    },
    isClear: {
      type: Boolean,
      default: false,
    },
    pdfTitle: {
      type: String,
    }
  },
  data() {
    return {
      currentPageSrc: "",
      fileLoading: false,
      visible: true,
      close: null,
      localDialogVisible: false,
      currentPageSrc: '',
      currentPage: 1,
      totalPage: 1,
      rcViewerOptions: {
        // inline: true
      },
      zoom: 1,
      catalogVisible: false,
      tocData: [],
      generateList: [],
      expandedKeys: [],
      searchValue: "",
      autoExpandParent: true,
      drawerSize: "default",
    };
      viewerCon: null,
      preViewMd5: '',
      loading: false,
    }
  },
  watch: {
    md5: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.getFileInfo();
        }
      },
    },
  },
  created(){
    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: {
    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;
    hadleOpenDialog() {
      this.preViewMd5 = this.md5
      this.currentPage = 1
      this.currentPageSrc = ''
      this.totalPage = 1
      this.viewerCon?.destroy()
      this.loading = true;
      this.clearDom();
      this.getFileInfo();
      this.$nextTick(() => {
        this.scrollBottom()
      });
    },
    dragStart(e) {
      if (e && e.preventDefault) {
        e.preventDefault();
      } else {
        window.event.returnValue = false;
    closeDialog() {
      this.localDialogVisible = false
    },
    openDialog() {
      this.localDialogVisible = true
    },
    async downloadPdf() {
      console.log(this.preViewMd5)
      console.log(await getResourcePath(this.preViewMd5),"12345");
      
      window.open(await getResourcePath(this.preViewMd5))
    },
    domViewer() {
      // 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, // 显示标题
        })
      }
    },
    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 + "%";
        }
      } else {
        if (this.zoom > 0.5) {
          let newZoom = this.zoom - 0.1;
          this.zoom = newZoom;
          this.refs.image.style.height = newZoom * 100 + "%";
        }
    clearDom() {
      let ele = document.getElementById('imageParent')
      if (ele) {
        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()
      }
      if (ele) {
        ele.appendChild(img)
      }
    },
    scrollBottom() {
      var that = this
      var ele = document.getElementById('imageParent')
      if (ele) {
        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)
            }
          }
        });
      }
    },
    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.loading = true
      this.MG.file
        .getPdfInfo({ md5: this.preViewMd5 })
        .then((res) => {
          try {
            if (typeof res === 'string' && res !== null) {
              console.log(134)
              this.totalPage = JSON.parse(res).totalPages
            } else if (typeof res === 'object' && res !== null) {
              console.log(res.totalPages)
              this.totalPage = res.totalPages
            }
          } catch (error) {
            console.log(error, 'pdf返回值类型错误');
          }
          console.log(this.currentPage,"111")
          this.createDom(this.currentPage)
          this.loading = false
        })
        .catch((err) => {
          this.totalPage = 0
          this.createDom(this.currentPage)
          console.error(err)
          this.loading = false
        })
    },
    getPageImage(page) {
      console.log(page, "page");
      const ctx = process.env.VUE_APP_API_URL;
      this.fileLoading = true;
      this.currentPageSrc =
      const ctx = process.env.VUE_APP_API_URL
      return (
        ctx +
        "/file/Preview/GetPageImage" +
        "?md5=" +
        this.md5 +
        "&index=" +
        '/file/GetPdfPageImage' +
        '?md5=' +
        this.preViewMd5 +
        '&index=' +
        page +
        "&dpi=150";
        '&dpi=200'
      )
    },
  },
};
</script>
<style scoped lang="less">
.imgbox {
  width: 100%;
  height: 100%;
  background-color: aquamarine;
  img {
    width: 100%;
  }
}
</style>
</script>