优化pdf预览功能

src/components/PDFEmbed/PdfViewer.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="vue-pdf" >
-    <vue-pdf-embed :source="testpdf1" ref="vuePdfRef" :style="scaleFun" class="vue-pdf-cs" @scroll="onScroll"  @loaded="onPdfLoaded"  :renderPageNumber="true" />
+  <div class="vue-pdf"  @scroll="onScroll" ref="myDiv">
+    <vue-pdf-embed :source="testpdf1" ref="vuePdfRef" :style="scaleFun" class="vue-pdf-cs"  @loaded="onPdfLoaded"  :renderPageNumber="true" />
   </div>
   <div class="page-tool">
     <div class="page-tool-item" @click="lastPage">上一页</div>
@@ -24,8 +24,7 @@ const scaleFun = computed(() => {
   return {
     transform: `scale(${scaleData.scale})`,
     transition: 'all 0.3s',
-    transformOrigin: 'top',
-    height: '135vh'
+    transformOrigin: 'top'
   };
 });
 
@@ -35,14 +34,13 @@ const scaleData = reactive({
   scaleMax: 100, // 最大缩放比例
   scaleMin: 0.1, // 最小缩放比例
   scaleBtn: 0.4, // 缩放按钮缩放比例
-  rotate: 0, // 旋转角度
   pageNum: 1, // 当前页面
   url: 'http://www.fao.fudan.edu.cn/_upload/article/files/f5/53/8b40af524563b9b60049899b2dd3/c9a205b4-4188-4af3-863e-bc4e56872e33.pdf',
   numPages: 0
 });
 
 const vuePdfRef = ref<InstanceType<typeof VuePdfEmbed> | null>(null);
-
+const myDiv = ref(null);
 const lastPage = () => {
   if (scaleData.pageNum > 1) {
     scaleData.pageNum--
@@ -88,7 +86,7 @@ const onPdfLoaded = (data: { numPages: number }) => {
 };
 
 const scrollToPage = () => {
-  const pdfContainer = vuePdfRef.value.$el;
+  const pdfContainer = myDiv.value;
   const pageHeight = pdfContainer.scrollHeight / scaleData.numPages;
   const targetScrollPosition = (scaleData.pageNum-1) * pageHeight;
 
@@ -98,7 +96,7 @@ const scrollToPage = () => {
   });
 };
 const onScroll = () => {
-  const pdfContainer = vuePdfRef.value.$el;
+  const pdfContainer = myDiv.value;
   const scrollTop = pdfContainer.scrollTop+100;
   const pageHeight = pdfContainer.scrollHeight / scaleData.numPages;
   const currentPage = Math.floor(scrollTop / pageHeight) + 1;
@@ -146,18 +144,16 @@ const onScroll = () => {
   margin: 0px auto;
   width: 100%;
   position: relative;
-  height: calc(100vh - 180px);
+  overflow: auto;
   background: #e3e2e2;
 }
 
 .vue-pdf-cs{
   width: 100%;
   height: 100%;
-  overflow: auto;
   text-align: center;
   display: flex;
   flex-direction: column;
   gap: 20px;
-
 }
 </style>

src/views/query/log/index.vue

@@ -25,12 +25,13 @@
           </el-form>
         </div>
       </div>
-      <iframe :src="'http://www.cztouch.com/upfiles/soft/testpdf.pdf'" width="100%" height="100%"></iframe>
+      <pdfViewer></pdfViewer>
     </div>
   </div>
 </template>
 
-<script setup lang="ts" name="useProTable">
+<script setup lang="ts">
+import pdfViewer from "@/components/PDFEmbed/PdfViewer.vue";
 import { ref} from "vue";
 const queryParams = ref({
   name: '',
@@ -46,10 +47,3 @@ const resetQuery = () => {
 };
 
 </script>
-<style>
-iframe {
-  overflow: auto; /* 显示滚动条 */
-  scrollbar-width: thin; /* 设置滚动条宽度 */
-  scrollbar-color: #888 #dc2c2c; /* 设置滚动条颜色 */
-}
-</style>

src/views/query/record/index.vue

@@ -25,12 +25,13 @@
           </el-form>
         </div>
       </div>
-      <iframe :src="'https://api.idocv.com/view/url?url=http%3a%2f%2fapi.idocv.com%2fdata%2fdoc%2ftest.pdf'" width="100%" height="100%"></iframe>
+      <pdfViewer></pdfViewer>
     </div>
   </div>
 </template>
 
-<script setup lang="ts" name="useProTable">
+<script setup lang="ts">
+import pdfViewer from "@/components/PDFEmbed/PdfViewer.vue";
 import { ref} from "vue";
 const queryParams = ref({
   name: '',
@@ -46,10 +47,3 @@ const resetQuery = () => {
 };
 
 </script>
-<style>
-iframe {
-  overflow: auto; /* 显示滚动条 */
-  scrollbar-width: thin; /* 设置滚动条宽度 */
-  scrollbar-color: #888 #dc2c2c; /* 设置滚动条颜色 */
-}
-</style>