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