feat: 添加一个急需缩放功能的pdf插件

src/hooks/init.ts

@@ -1,29 +1,57 @@
-import MiaoDirectory from "@/views/miaoDirectory.vue";
-import usePluginCenter from "./usePluginCenter";
-import MiaoVideoPlayer from "@/views/miaoVideoPlayer.vue";
+import MiaoDirectory from '@/views/miaoDirectory.vue'
+import usePluginCenter from './usePluginCenter'
+import MiaoVideoPlayer from '@/views/miaoVideoPlayer.vue'
+import MiaoIframe from '@/views/miaoIframe.vue'
+import MiaoPDF from '@/views/miaoPDF.vue'
 
 export default function init() {
-	const pluginCenter = usePluginCenter();
-	pluginCenter.registerComponent("miaoDirectory", "文件夹", MiaoDirectory, (vDirs, vFiles) => {
-		if (vFiles.length) {
-			return false;
-		}
-		return vDirs.length === 1;
-	});
-	pluginCenter.registerComponent("miaoVideoPlayer", "视频", MiaoVideoPlayer, (vDirs, vFiles) => {
-		if (vDirs.length !== 0) {
-			return false;
-		}
-		if (vFiles.length === 0) {
-			return false;
-		}
-		for(let i of vFiles) {
-			for(let s of ['mp4', 'm3u8', 'hls']) {
-				if(i.name.endsWith(s)) {
-					return true
-				}
-			}
-		}
-		return false
-	});
+    const pluginCenter = usePluginCenter()
+    pluginCenter.registerComponent(
+        'miaoDirectory',
+        '文件夹',
+        MiaoDirectory,
+        (vDirs, vFiles) => {
+            if (vFiles.length) {
+                return false
+            }
+            return vDirs.length === 1
+        }
+    )
+    pluginCenter.registerComponent(
+        'miaoVideoPlayer',
+        '视频',
+        MiaoVideoPlayer,
+        (vDirs, vFiles) => {
+            if (vDirs.length !== 0) {
+                return false
+            }
+            if (vFiles.length === 0) {
+                return false
+            }
+            for (let i of vFiles) {
+                for (let s of ['mp4', 'm3u8', 'hls']) {
+                    if (i.name.endsWith(s)) {
+                        return true
+                    }
+                }
+            }
+            return false
+        }
+    )
+    pluginCenter.registerComponent(
+        'miaoIframe',
+        '框架',
+        MiaoIframe,
+        (vDirs, vFiles) => {
+            return false
+        }
+    )
+    pluginCenter.registerComponent(
+        'miaoPDF',
+        'PDF',
+        MiaoPDF,
+        (vDirs, vFiles) => {
+            return true
+        }
+    )
 }

src/views/miaoIframe.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="iframe-container">
+        <iframe
+            :src="iframeSrc"
+            frameborder="0"
+            class="iframe-container-iframe"></iframe>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { VirtualFile } from '@/class/VirtualDirectory'
+import { onMounted, ref } from 'vue'
+
+const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
+    required: true
+})
+
+const iframeSrc = ref<string>()
+
+onMounted(() => {
+    iframeSrc.value = currentFiles.value[0].url
+})
+</script>
+
+<style scoped lang="scss">
+.iframe-container {
+    width: 100%;
+    height: 100%;
+    .iframe-container-iframe {
+        width: inherit;
+        height: inherit;
+    }
+}
+</style>

src/views/miaoPDF.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="miao-container">
+        <div ref="pdfEl" class="miao-container-pdf"></div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.mjs?worker'
+import { VirtualFile } from '@/class/VirtualDirectory'
+
+const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
+    required: true
+})
+
+const pdfEl = ref<HTMLDivElement>()
+
+onMounted(async () => {
+    const pdfSrc = currentFiles.value[0].url
+    // @ts-ignore
+    const PDFJS = await import('pdfjs-dist/build/pdf.mjs')
+    if (typeof window !== 'undefined' && 'Worker' in window) {
+        PDFJS.GlobalWorkerOptions.workerPort = new PdfjsWorker()
+    }
+    // 加载文档
+    let loadingTask = PDFJS.getDocument({ url: pdfSrc })
+    loadingTask.__PDFDocumentLoadingTask = true
+    const pdf = await loadingTask.promise // 使用await等待加载完毕
+    // 循环渲染每一页
+    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'
+        // @ts-ignore
+        pdfEl.value.appendChild(divPage)
+        canvas.width = viewport.width * pixelRatio // 计算宽度
+        canvas.height = viewport.height * pixelRatio
+        let renderContext = {
+            canvasContext: canvas.getContext('2d'),
+            viewport: viewport,
+            transform: [pixelRatio, 0, 0, pixelRatio, 0, 0]
+        }
+        await page.render(renderContext).promise // 一页一页的渲染
+        divPage.className = 'page complete'
+    }
+    console.log('pdf页面全部渲染完毕', pdf.numPages, pdf)
+})
+</script>
+
+<style scoped lang="scss">
+.miao-container {
+    width: 100%;
+    height: 100%;
+    background-color: rgb(53, 53, 53);
+    .miao-container-pdf {
+        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;
+    }
+    canvas {
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>