Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

zhongshujie

2025-03-14 21190e54e0fc3f5c5a8bc12500c48cf1853bfd62

 src/components/pdfview/index.vue

@@ -1,32 +1,34 @@
<!-- @format -->
<template>
  <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> -->
  <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>
    <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";
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,
@@ -38,153 +40,169 @@
      type: Boolean,
      default: false,
    },
    pdfTitle: {
      type: String,
    }
  },
  data() {
    return {
      currentPageSrc: "",
      localDialogVisible: false,
      currentPageSrc: '',
      currentPage: 1,
      totalPage: 1,
      viewerCon: null,
      preViewMd5: "",
    };
      preViewMd5: '',
      loading: false,
    }
  },
  watch: {
    isClear: {
      immediate: true,
      handler(val) {
        if (val == true) this.preViewMd5 = "";
      },
    },
    md5: {
      immediate: true,
      handler(val) {
        if (val) {
          this.preViewMd5 = val;
          this.currentPage = 1;
          this.currentPageSrc = "";
          this.totalPage = 1;
          this.viewerCon?.destroy();
        }
      },
    },
  },
  mounted() {
    this.scrollBottom();
    this.clearDom();
    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: {
    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()
      });
    },
    closeDialog() {
      this.localDialogVisible = false
    },
    openDialog() {
      this.localDialogVisible = true
    },
    async downloadPdf() {
      window.open(await getResourcePath(this.preViewMd5));
      console.log(this.preViewMd5)
      window.open(await getResourcePath(this.preViewMd5))
    },
    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, // 显示标题
      });
      // 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, // 显示标题
        })
      }
    },
    clearDom() {
      let ele = document.getElementById("imageParent");
      ele.innerHtml = "";
      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";
      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);
        that.viewerCon?.destroy()
        that.domViewer()
      }
      if (ele) {
        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);
      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.loading = true
      this.MG.file
        .getPdfInfo({ md5: this.preViewMd5 })
        .then((res) => {
          this.totalPage = res.totalPages;
          this.createDom(this.currentPage);
          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 = 1;
          this.createDom(this.currentPage);
          console.error(err);
        });
          this.totalPage = 0
          this.createDom(this.currentPage)
          console.error(err)
          this.loading = false
        })
    },
    getPageImage(page) {
      const ctx = process.env.VUE_APP_API_URL;
      const ctx = process.env.VUE_APP_API_URL
      return (
        ctx +
        "/file/GetPdfPageImage" +
        "?md5=" +
        '/file/GetPdfPageImage' +
        '?md5=' +
        this.preViewMd5 +
        "&index=" +
        '&index=' +
        page +
        "&dpi=200"
      );
        '&dpi=200'
      )
    },
  },
};
</script>
<style scoped lang="less">
.preview {
  width: 100%;
  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>
</script>