feat: 处理UI和界面展示优化性能

src/pages/explain/index copy 2.vue

@@ -0,0 +1,262 @@
+<template>
+  <div class="container_all">
+    <div class="container_public" @scroll="handleScroll">
+      <div v-for="pageNumber in loadedPages" :key="pageNumber">
+        <vue-pdf
+          class="container_pdf"
+          :src="fileUrl"
+          :page="pageNumber"
+          @page-loaded="onPageLoaded"
+        ></vue-pdf>
+      </div>
+    </div>
+
+    <!-- <div
+      class="container_public"
+      :style="{ transform: `scale(${scale})` }"
+      @scroll="handleScroll"
+    >
+      <div v-for="pageNumber in numPages" :key="pageNumber">
+        <vue-pdf
+          class="container_pdf"
+          :src="fileUrl"
+          :page="pageNumber"
+          @page-loaded="onPageLoaded"
+        ></vue-pdf>
+      </div>
+    </div> -->
+
+    <img
+      v-if="loadAll"
+      src="../../static/explain/down_up.png"
+      class="absolute_image1"
+      @click="download"
+    />
+    <img
+      v-if="loadAll"
+      src="../../static/explain/scale_in.png"
+      class="absolute_image2"
+      @click="scaleIn"
+    />
+    <img
+      v-if="loadAll"
+      src="../../static/explain/scale_out.png"
+      class="absolute_image3"
+      @click="scaleOut"
+    />
+  </div>
+</template>
+
+<script>
+import { detail } from "@/api/explain.js";
+import VuePdf from "vue-pdf";
+
+export default {
+  components: {
+    VuePdf,
+  },
+
+  data() {
+    return {
+      loadAll: false,
+      name: "",
+      fileUrl: "",
+      fileName: "",
+      currentPage: 1,
+      numPages: 0,
+      scale: 1,
+      loadedPages: 1,
+    };
+  },
+
+  onLoad(e) {
+    var that = this;
+    that.id = e.id;
+    that.getDetail();
+  },
+
+  methods: {
+    // 滚动加载逻辑
+    // {"type":"scroll","timeStamp":24324.79999999702,"detail":{},
+    // "target":{"id":"","offsetLeft":0,"offsetTop":0,"dataset":{}},
+    // "currentTarget":{"id":"","offsetLeft":0,"offsetTop":0,"dataset":{}},"touches":[],
+    // "changedTouches":[],"mp":{"@warning":"mp is deprecated","type":"scroll",
+    // "timeStamp":24324.79999999702,"detail":{},"target":{"id":"","offsetLeft":0,"offsetTop":0,"dataset":{}},
+    // "currentTarget":{"id":"","offsetLeft":0,"offsetTop":0,"dataset":{}},"touches":[],"changedTouches":[]},
+    // "_processed":true}
+    handleScroll(e) {
+      const target = e.target;
+      console.log("gadsfq3werqewqrr==jjj==" + JSON.stringify(e));
+      var offsetTop = target.offsetTop;
+      console.log("gadsfq3werqewqrr==bbb==" + offsetTop);
+
+      // 滚动到底部且未加载完所有页
+      if (this.loadedPages < this.numPages) {
+        console.log("gadsfq3werqewqrr==ccc==" + offsetTop);
+        this.loadedPages += 1; // 加载下一页
+      }
+
+      console.log(
+        "gadsfq3werqewqrr==111==" + this.loadedPages + "====" + this.numPages
+      );
+    },
+    ///接口获取数据
+    getDetail() {
+      var that = this;
+      var id = that.id;
+
+      detail(id).then((res) => {
+        if (res.code === 0) {
+          that.name = res.data.name;
+          that.fileUrl = res.data.fileUrl;
+          that.fileName = that.getFileExtension(that.fileUrl);
+          that.getPdfPages();
+        }
+      });
+    },
+
+    async getPdfPages() {
+      var that = this;
+      const loadingTask = VuePdf.createLoadingTask(that.fileUrl);
+      const pdf = await loadingTask.promise;
+      this.numPages = pdf.numPages;
+    },
+
+    ///截取文件
+    getFileExtension(fileUrl) {
+      var filename = fileUrl.split("/").pop();
+      var lastDotIndex = filename.lastIndexOf(".");
+      if (lastDotIndex === -1 || lastDotIndex === filename.length - 1) {
+        return "";
+      } else {
+        return filename.substring(lastDotIndex + 1).toLowerCase();
+      }
+    },
+
+    setNumPages(numPages) {
+      this.numPages = numPages;
+    },
+
+    onPageLoaded(page) {
+      this.loadedPages = page;
+      // if (this.numPages > 0 && page == this.numPages) {
+      //   this.loadAll = true;
+      // }
+    },
+
+    prevPage() {
+      if (this.currentPage > 1) {
+        this.currentPage--;
+      }
+    },
+
+    nextPage() {
+      if (this.currentPage < this.numPages) {
+        this.currentPage++;
+      }
+    },
+
+    scaleIn() {
+      this.scale *= 1.1;
+    },
+
+    scaleOut() {
+      this.scale /= 1.1;
+    },
+
+    async download() {
+      var that = this;
+      var name = that.name;
+      var fileUrl = that.fileUrl;
+      var fileName = that.fileName;
+
+      var finalName = "";
+      if (name != null && name != "") {
+        finalName = name + "." + fileName;
+      } else {
+        finalName = new Date().getTime() + "." + fileName;
+      }
+
+      try {
+        // https://music-play.oss-cn-shenzhen.aliyuncs.com/backOss/file/f5f5ed93fae74fb683e8d116c40a884c.xlsx
+        const response = await fetch(fileUrl);
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const blob = await response.blob();
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.style.display = "none";
+        a.href = url;
+        a.download = finalName;
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+      } catch (error) {}
+    },
+  },
+};
+</script>
+
+<style scoped>
+.container_all {
+  width: 100vw;
+  height: 100%;
+}
+
+.container_public {
+  height: 100vh;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+.container_pdf {
+  width: 100vw;
+  margin: 10px auto;
+  border: 1px solid #e5e5e5;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.absolute_image1 {
+  position: fixed;
+  bottom: 365px;
+  right: 20px;
+  width: 30px;
+  height: 30px;
+  padding: 5px 5px;
+  background-color: white;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.absolute_image2 {
+  position: fixed;
+  bottom: 305px;
+  right: 20px;
+  width: 30px;
+  height: 30px;
+  padding: 5px 5px;
+  background-color: white;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.absolute_image3 {
+  position: fixed;
+  bottom: 260px;
+  right: 20px;
+  width: 30px;
+  height: 30px;
+  padding: 5px 5px;
+  background-color: white;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+</style>

src/pages/explain/index.vue

@@ -1,24 +1,14 @@
 <template>
   <div class="container_all">
     <div class="container_public" :style="{ transform: `scale(${scale})` }">
-      <div v-if="numPages > 0">
-        <div v-for="pageNumber in numPages" :key="pageNumber">
-          <vue-pdf
-            class="container_pdf"
-            :src="fileUrl"
-            :page="pageNumber"
-            @page-loaded="onPageLoaded"
-          ></vue-pdf>
-        </div>
+      <div v-for="pageNumber in loadedPages" :key="pageNumber">
+        <vue-pdf
+          class="container_pdf"
+          :src="fileUrl"
+          :page="pageNumber"
+          @page-loaded="onPageLoaded"
+        ></vue-pdf>
       </div>
-
-      <vue-pdf
-        v-else
-        class="container_pdf"
-        :src="fileUrl"
-        @num-pages="setNumPages"
-        v-show="false"
-      ></vue-pdf>
     </div>
 
     <img
@@ -27,7 +17,7 @@
       class="absolute_image1"
       @click="download"
     />
-    <img
+    <!-- <img
       v-if="loadAll"
       src="../../static/explain/scale_in.png"
       class="absolute_image2"
@@ -38,7 +28,7 @@
       src="../../static/explain/scale_out.png"
       class="absolute_image3"
       @click="scaleOut"
-    />
+    /> -->
   </div>
 </template>
 
@@ -60,6 +50,7 @@ export default {
       currentPage: 1,
       numPages: 0,
       scale: 1,
+      loadedPages: 1,
     };
   },
 
@@ -70,6 +61,22 @@ export default {
   },
 
   methods: {
+    // 滚动加载逻辑
+    // {"type":"scroll","timeStamp":24324.79999999702,"detail":{},
+    // "target":{"id":"","offsetLeft":0,"offsetTop":0,"dataset":{}},
+    // "currentTarget":{"id":"","offsetLeft":0,"offsetTop":0,"dataset":{}},"touches":[],
+    // "changedTouches":[],"mp":{"@warning":"mp is deprecated","type":"scroll",
+    // "timeStamp":24324.79999999702,"detail":{},"target":{"id":"","offsetLeft":0,"offsetTop":0,"dataset":{}},
+    // "currentTarget":{"id":"","offsetLeft":0,"offsetTop":0,"dataset":{}},"touches":[],"changedTouches":[]},
+    // "_processed":true}
+    handleScroll(e) {
+      // const target = e.target;
+      // var offsetTop = target.offsetTop;
+      // // 滚动到底部且未加载完所有页
+      // if (this.loadedPages < this.numPages) {
+      //   this.loadedPages += 1; // 加载下一页
+      // }
+    },
     ///接口获取数据
     getDetail() {
       var that = this;
@@ -80,10 +87,24 @@ export default {
           that.name = res.data.name;
           that.fileUrl = res.data.fileUrl;
           that.fileName = that.getFileExtension(that.fileUrl);
+          that.getPdfPages();
         }
       });
     },
 
+    async getPdfPages() {
+      var that = this;
+      const loadingTask = VuePdf.createLoadingTask(that.fileUrl);
+      const pdf = await loadingTask.promise;
+      this.numPages = pdf.numPages;
+      this.loadedPages = this.numPages;
+
+      if (this.numPages == 0) {
+        return;
+      }
+      this.loadedPages = this.numPages > 1 ? 1 : 1;
+    },
+
     ///截取文件
     getFileExtension(fileUrl) {
       var filename = fileUrl.split("/").pop();
@@ -95,16 +116,6 @@ export default {
       }
     },
 
-    setNumPages(numPages) {
-      this.numPages = numPages;
-    },
-
-    onPageLoaded(page) {
-      if (this.numPages > 0 && page == this.numPages) {
-        this.loadAll = true;
-      }
-    },
-
     prevPage() {
       if (this.currentPage > 1) {
         this.currentPage--;
@@ -117,7 +128,6 @@ export default {
       }
     },
 
-    
     scaleIn() {
       this.scale *= 1.1;
     },
@@ -126,6 +136,17 @@ export default {
       this.scale /= 1.1;
     },
 
+    onPageLoaded(page) {
+      if (this.numPages > 0) {
+        if (!this.loadAll) {
+          this.loadAll = true;
+        }
+        if (this.loadedPages < this.numPages) {
+          this.loadedPages += 1;
+        }
+      }
+    },
+
     async download() {
       var that = this;
       var name = that.name;
@@ -164,20 +185,20 @@ export default {
 <style scoped>
 .container_all {
   width: 100vw;
-  height: 100%;
+  height: 100vh;
 }
 
 .container_public {
   width: 100vw;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  height: 100vh;
+  overflow-y: auto;
 }
 
 .container_pdf {
-  width: 100vw;
-  margin: 10px 0;
+  width: calc(100vw-2px);
+  margin: 10px auto;
+  border: 1px solid #e5e5e5;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .absolute_image1 {