pdf

src/views/common/pdfPreview.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="pdf-preview-container">
     <!-- 头部导航栏 -->
-    <div class="pdf-header">
+
       <div class="page-navigation">
         <div class="page-controls">
 
@@ -13,14 +13,14 @@
 
         </div>
       </div>
-    </div>
+
 
     <!-- PDF预览区域 -->
     <div class="pdf-content">
       <!-- PDF内容显示区域 -->
       <div class="pdf-display-area">
         <div v-for="item in state.numPages" :key="item" class='pdf-item' :id="`pdf-page-${item}`">
-          <vue-pdf-embed :source="state.source" class="vue-pdf-embed" :page="item" />
+          <vue-pdf-embed :source="state.source" class="vue-pdf-embed" :page="item" style="width: 100%;"/>
         </div>
       </div>
     </div>
@@ -93,6 +93,22 @@ const nextPage = (): void => {
   }
 };
 
+const pageZoomOut = (): void => {
+  loadingTask.value = createLoadingTask(state.source);
+  loadingTask.value.promise.then(pages => {
+    pages[0].getViewport({ scale: 1.5 });
+  });
+
+}
+const pageZoomIn = (): void => {
+  loadingTask.value = createLoadingTask(state.source);
+  loadingTask.value.promise.then(pages => {
+    pages[0].getViewport({ scale: 0.5 });
+  });
+}
+
+
+
 // 跳转到指定页
 const goToPage = (): void => {
   // 确保输入是有效数字
@@ -270,6 +286,8 @@ onBeforeUnmount(() => {
     }
 
     .pdf-display-area {
+      position: relative;
+      width: 100%;
       .pdf-item {
         margin: 16px 0px;
       }
@@ -279,8 +297,8 @@ onBeforeUnmount(() => {
   .page-tool {
     position: absolute;
     bottom: 35px;
-    padding-left: 15px;
-    padding-right: 15px;
+    padding-left: 8px;
+    padding-right: 8px;
     display: flex;
     align-items: center;
     background: rgb(66, 66, 66);