PDF展示性能优化

src/components/PDFViewFull/index.vue

@@ -94,16 +94,12 @@
             cMapPacked: true,
           }"
           @loaded="renderedShow"
-          @rendered="
-            showVisible = false;
-            showELStatus = true;
-          "
-          :page="1"
+          @rendered="rendered"
           annotation-layer
           text-layer
         />
 
-        <template v-for="(item, index) in pageLength" :key="index">
+        <!-- <template v-for="(item, index) in pageLength" :key="index">
           <div :id="'scrollbarId' + (index + 1)">
             <el-scrollbar
               v-if="showELStatus"
@@ -140,7 +136,7 @@
           >
             第 {{ index + 1 }} 页，共 {{ pageLength }} 页
           </div>
-        </template>
+        </template> -->
       </el-scrollbar>
     </div>
   </div>
@@ -199,8 +195,7 @@ const bigScroll = ({ scrollTop }) => {
   value.value = scrollTop;
 };
 const scrollTo = (page) => {
-  console.log(page);
-  const targetElement = document.getElementById(`pdf${page - 1}`);
+  const targetElement = document.getElementById(`pdf${page}`);
   if (targetElement) {
     targetElement.scrollIntoView({ behavior: "smooth" });
   }
@@ -247,19 +242,23 @@ watch(
 );
 const rendered = () => {
   loading.value = false;
+  const clickableElementsA =
+    document.querySelectorAll(".vue-pdf-embed")[0].children;
 
-  const clickableElementsA = document.querySelectorAll(".vue-pdf-embed div");
   const clickableElements = document.querySelectorAll(
     ".vue-pdf-embed .vue-pdf-embed__page"
   );
 
   // 设置所有子元素居中对齐
-  clickableElementsA.forEach((element) => {
+
+  clickableElementsA.forEach((element, index) => {
     element.style.display = "flex";
     element.style.alignItems = "center";
     element.style.justifyContent = "center";
+    element.setAttribute("name", "pdfItem");
+    element.id = `pdf${index + 1}`;
   });
-
+  setPageInfo();
   clickableElements.forEach((element, index) => {
     element.index = index;
     let rotationAngle = 0;
@@ -401,6 +400,24 @@ const rendered = () => {
     });
   });
 };
+const setPageInfo = () => {
+  const clickableElementsB = document.getElementsByName("pdfItem");
+  clickableElementsB.forEach((element, index) => {
+    const pageInfo = document.createElement("div");
+    pageInfo.textContent = `第 ${index + 1} 页`;
+
+    // 设置样式
+    pageInfo.style.width = "100%";
+    pageInfo.style.textAlign = "center";
+    pageInfo.style.fontSize = "24px";
+    pageInfo.style.fontWeight = "bold";
+    pageInfo.style.margin = "20px 0";
+    pageInfo.style.color = "white";
+
+    // 插入到当前元素的后面
+    element.insertAdjacentElement("afterend", pageInfo);
+  });
+};
 </script>
 
 <style lang="scss" scoped>