无人机样章

zhongshujie

6 天以前 bb584963c6abe77c5577cbcad3c9956b69444ae9

 src/components/pdfview/index.vue

@@ -11,8 +11,7 @@
      <div class="pdfBox-component">
        <div class="preview" v-if="this.preViewMd5">
          <div id="imageParent" class="imageBox"></div>
          <div class="bottom_tool">
          </div>
          <div class="bottom_tool"></div>
        </div>
        <div class="notBox" v-if="totalPage == 0 && !loading">
          <el-empty description="暂无数据"></el-empty>
@@ -21,14 +20,13 @@
      </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,
@@ -42,18 +40,18 @@
    },
    pdfTitle: {
      type: String,
    }
    },
  },
  data() {
    return {
      localDialogVisible: false,
      currentPageSrc: '',
      currentPage: 1,
      currentPageSrc: "",
      currentPage: 3,
      totalPage: 1,
      viewerCon: null,
      preViewMd5: '',
      preViewMd5: "",
      loading: false,
    }
    };
  },
  watch: {
    // md5: {
@@ -85,121 +83,140 @@
  },
  methods: {
    hadleOpenDialog() {
      this.preViewMd5 = this.md5
      this.currentPage = 1
      this.currentPageSrc = ''
      this.totalPage = 1
      this.viewerCon?.destroy()
      this.preViewMd5 = this.md5;
      this.currentPage = 3;
      this.currentPageSrc = "";
      this.totalPage = 1;
      this.viewerCon?.destroy();
      this.loading = true;
      this.clearDom();
      this.getFileInfo();
      this.$nextTick(() => {
        this.scrollBottom()
        this.scrollBottom();
      });
    },
    closeDialog() {
      this.localDialogVisible = false
      this.localDialogVisible = false;
    },
    openDialog() {
      this.localDialogVisible = true
      this.localDialogVisible = true;
    },
    async downloadPdf() {
      console.log(this.preViewMd5)
      window.open(await getResourcePath(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')
      let ele = document.getElementById("imageParent");
      if (ele) {
        this.viewerCon = new Viewer(ele, {
          inline: false,
          container: this.container
            ? this.container.querySelector('#app')
            : 'body',
            ? this.container.querySelector("#app")
            : "body",
          navbar: true, // 显示导航栏
          toolbar: true, // 显示工具栏
          title: true, // 显示标题
        })
      }
    },
    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)
            }
          }
        });
      }
    },
    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);
      // 手动触发滚动事件
      // ele.dispatchEvent(new Event("scroll"));
      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() {
      const ele = document.getElementById("imageParent");
      if (ele) {
        let lastScrollTop = 0;
        ele.addEventListener("scroll", () => {
          const scrollTop = ele.scrollTop;
          const scrollBottom = ele.scrollHeight - scrollTop - ele.clientHeight;
          if (scrollBottom < 10 && scrollTop > lastScrollTop) {
            console.log(
              "滚动到底部，当前页：",
              this.currentPage,
              "总页数：",
              this.totalPage
            );
            if (this.currentPage < this.totalPage) {
              this.currentPage++;
              if (this.currentPage <= this.totalPage) {
                this.createDom(this.currentPage);
              }
            }
          }
          lastScrollTop = scrollTop;
        });
      }
    },


    getFileInfo() {
      // 获取目录
      this.loading = true
      this.loading = true;
      this.MG.file
        .getPdfInfo({ md5: this.preViewMd5 })
        .then((res) => {
          try {
            if (typeof res === 'string' && res !== null) {
              this.totalPage = JSON.parse(res).totalPages
            } else if (typeof res === 'object' && res !== null) {
              this.totalPage = res.totalPages
            if (typeof res === "string" && res !== null) {
              this.totalPage = JSON.parse(res).totalPages;
            } else if (typeof res === "object" && res !== null) {
              this.totalPage = res.totalPages;
            }
          } catch (error) {
            console.log(error, 'pdf返回值类型错误');
            console.log(error, "pdf返回值类型错误");
          }
          this.createDom(this.currentPage)
          this.loading = false
          const maxPages = Math.min(3, this.totalPage);
          for (let i = 0; i < maxPages; i++) {
            this.createDom(i + 1);
          }
          this.loading = false;
        })
        .catch((err) => {
          this.totalPage = 0
          this.createDom(this.currentPage)
          console.error(err)
          this.loading = false
        })
          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>