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