From eebf6591511daa7c92a7b009a0fef5fb2bea501b Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期三, 03 七月 2024 11:26:20 +0800
Subject: [PATCH] feat:修改pdf查看器

---
 src/views/folder/index.vue         |   14 ++++++++++++++
 public/pdfjs/web/viewer.html       |    2 +-
 components.d.ts                    |    1 +
 index.html                         |    2 --
 src/components/PDFVIewer/index.vue |   16 +++++++++-------
 5 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 95162e9..bc00ff8 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -35,6 +35,7 @@
     Header: typeof import('./src/components/Header/index.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     NormalHeader: typeof import('./src/components/NormalHeader/index.vue')['default']
+    PDFViewer: typeof import('./src/components/PDFViewer/index.vue')['default']
     PDFVIewer: typeof import('./src/components/PDFVIewer/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/index.html b/index.html
index 087f943..cfa84ca 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,6 @@
     <title>Vite + Vue</title>
     <!-- 鐢熶骇鐗堟湰鎹㈡簮 -->
     <script src='https://meet.jit.si/external_api.js'></script>
-    <script src='./public/pdfjs/build/pdf.mjs'></script>
   </head>
   <body>
     <div id="app"></div>
@@ -15,7 +14,6 @@
     <script>
       window.onload = () => {
         window.JitsiMeetExternalAPI = JitsiMeetExternalAPI;
-        window.pdfjsLib = pdfjsLib;
       }
     </script>
   </body>
diff --git a/public/pdfjs/web/viewer.html b/public/pdfjs/web/viewer.html
index 11ddd9b..768aedc 100644
--- a/public/pdfjs/web/viewer.html
+++ b/public/pdfjs/web/viewer.html
@@ -293,7 +293,7 @@
                 </span>
                 <span id="numPages" class="toolbarLabel"></span>
               </div>
-              <div id="toolbarViewerRight">
+              <div id="toolbarViewerRight" style="display: none;">
                 <div id="editorModeButtons" class="splitToolbarButton toggled" role="radiogroup">
                   <button id="editorHighlight" class="toolbarButton" hidden="true" disabled="disabled" title="Highlight" role="radio" aria-checked="false" aria-controls="editorHighlightParamsToolbar" tabindex="31" data-l10n-id="pdfjs-editor-highlight-button">
                     <span data-l10n-id="pdfjs-editor-highlight-button-label">Highlight</span>
diff --git a/src/components/PDFVIewer/index.vue b/src/components/PDFVIewer/index.vue
index 6b9476b..bb10852 100644
--- a/src/components/PDFVIewer/index.vue
+++ b/src/components/PDFVIewer/index.vue
@@ -1,24 +1,26 @@
 <template>
   <div class="pdf-container">
-    <canvas ref="pdfCanvas" class="pdf-canvas"></canvas>
+    <iframe :src="fileUrl" width="100%" height="100%"></iframe>
   </div>
 </template>
 
 <script setup>
-import { ref,onMounted } from 'vue';
+import { ref, onMounted } from 'vue';
 
 const props = defineProps({
   pdfUrl: {
     type: String,
     required: true
   }
-})
-const pdfCanvas = ref(null);
+});
+const viewerUrl = '/pdfjs/web/viewer.html?file='; // pdfjs鏂囦欢鍦板潃
+
+const fileUrl = ref('');
+
 
 const renderPDF = () => {
-  const url = props.pdfUrl;
-  console.log(window.pdfjsLib);
-}
+  fileUrl.value = viewerUrl + encodeURIComponent(props.pdfUrl);
+};
 
 onMounted(() => {
   renderPDF();
diff --git a/src/views/folder/index.vue b/src/views/folder/index.vue
index 811efe8..23fd948 100644
--- a/src/views/folder/index.vue
+++ b/src/views/folder/index.vue
@@ -49,6 +49,10 @@
         </div>
       </div>
     </div>
+
+    <div class="pdf-container">
+      <PDFViewer :pdfUrl="'/helloworld.pdf'"></PDFViewer>
+    </div>
   </div>
 </template>
 
@@ -143,4 +147,14 @@
     margin-right: 20px;
   }
 }
+
+.pdf-container {
+  width: 800px;
+  height: 800px;
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 </style>
\ No newline at end of file

--
Gitblit v1.8.0