feat: 优化了PDF插件的相关表现

src/views/miaoPDF.vue

@@ -1,13 +1,24 @@
 <template>
     <div class="miao-container">
-        <div ref="pdfEl" class="miao-container-pdf"></div>
+        <div class="miao-container-topBar">
+            <div class="miao-container-topBar-btn" @click="() => handleZoom(10)" title="快速缩小">--</div>
+            <div class="miao-container-topBar-btn" @click="() => handleZoom()" title="缩小">-</div>
+            <div class="miao-container-topBar-btn" @click="() => handleResetMargin()" title="还原">还原缩放</div>
+            <div class="miao-container-topBar-btn" @click="() => handleShrink()" title="放大">+</div>
+            <div class="miao-container-topBar-btn" @click="() => handleShrink(10)" title="快速放大">++</div>
+        </div>
+        <NScrollbar>
+            <div ref="pdfEl" class="miao-container-pdf" :style="{ margin: `0 ${pdfMargin}px` }"></div>
+        </NScrollbar>
+        <div class="miao-container-loading" v-if="isLoading">加载中，加载进度：{{ loadingPercent === -1 ? '缓存中' : `${canvasList.length}/${pdfPageCount}` }}</div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref, shallowReactive } from 'vue'
 import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.mjs?worker'
 import { VirtualFile } from '@/class/VirtualDirectory'
+import { NScrollbar } from 'naive-ui';
 
 const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
     required: true
@@ -15,6 +26,41 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
 
 const pdfEl = ref<HTMLDivElement>()
 
+// 通过margin来实现缩小功能
+const pdfMargin = ref<number>(0)
+
+const pdfPageCount = ref<number>(-1)
+
+const isLoading = computed(() => {
+    return canvasList.length !== pdfPageCount.value
+})
+
+const canvasList = shallowReactive<HTMLCanvasElement[]>([])
+
+const handleZoom = (index?: number) => {
+    const _index = index ?? 1
+    pdfMargin.value += 10 * _index
+}
+
+const handleShrink = (index?: number) => {
+    const _index = index ?? 1
+    if (pdfMargin.value - 10 * _index <= 0) {
+        return pdfMargin.value = 0
+    }
+    pdfMargin.value -= 10 * _index
+}
+
+const handleResetMargin = () => {
+    pdfMargin.value = 0
+}
+
+const loadingPercent = computed(() => {
+    if(pdfPageCount.value === -1) {
+        return -1
+    }
+    return canvasList.length / pdfPageCount.value
+})
+
 onMounted(async () => {
     const pdfSrc = currentFiles.value[0].url
     // @ts-ignore
@@ -26,19 +72,17 @@ onMounted(async () => {
     let loadingTask = PDFJS.getDocument({ url: pdfSrc })
     loadingTask.__PDFDocumentLoadingTask = true
     const pdf = await loadingTask.promise // 使用await等待加载完毕
+    pdfPageCount.value = pdf.numPages
     // 循环渲染每一页
     for (let i = 1; i <= pdf.numPages; i++) {
         const page = await pdf.getPage(i)
         let pixelRatio = 3
         let viewport = page.getViewport({ scale: 1 })
-        let divPage = window.document.createElement('div') // canvas的外层div
         // 使用canvas渲染
-        let canvas = divPage.appendChild(
-            window.document.createElement('canvas')
-        )
-        divPage.className = 'page'
+        let canvas = window.document.createElement('canvas')
+        canvasList.push(canvas)
         // @ts-ignore
-        pdfEl.value.appendChild(divPage)
+        pdfEl.value.appendChild(canvas)
         canvas.width = viewport.width * pixelRatio // 计算宽度
         canvas.height = viewport.height * pixelRatio
         let renderContext = {
@@ -47,9 +91,7 @@ onMounted(async () => {
             transform: [pixelRatio, 0, 0, pixelRatio, 0, 0]
         }
         await page.render(renderContext).promise // 一页一页的渲染
-        divPage.className = 'page complete'
     }
-    console.log('pdf页面全部渲染完毕', pdf.numPages, pdf)
 })
 </script>
 
@@ -58,22 +100,75 @@ onMounted(async () => {
     width: 100%;
     height: 100%;
     background-color: rgb(53, 53, 53);
+    overflow-y: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .miao-container-topBar {
+        box-sizing: border-box;
+        padding: 0 30px;
+        height: 30px;
+        width: 100%;
+        background-color: rgb(170, 176, 182);
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        &-btn {
+            cursor: pointer;
+            user-select: none;
+            height: 80%;
+            padding: 0 5px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: larger;
+            letter-spacing: 1px;
+            color: black;
+            border-radius: 5px;
+
+            &:hover {
+                background-color: #eaeaea42;
+            }
+        }
+    }
+
     .miao-container-pdf {
+        min-width: 0;
         max-width: 100%;
         max-height: 100%;
-        overflow: scroll;
         display: flex;
         flex-direction: column;
-        align-items: center;
+
+        .page {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transform: scale(0.5);
+        }
+
+        canvas {
+            width: 100%;
+            height: 100%;
+            border-bottom: 1px solid black;
+        }
     }
-    .page {
+
+    .miao-container-loading {
+        position: absolute;
+        top: 40px;
+        background-color: aliceblue;
+        border: 1px solid black;
+        height: 40px;
+        width: 400px;
+        border-radius: 10px;
         display: flex;
         justify-content: center;
         align-items: center;
-    }
-    canvas {
-        width: 100%;
-        height: 100%;
+        font-size: 20px;
+        letter-spacing: 5px;
+        user-select: none;
     }
 }
 </style>