jxkg-new-ui-student.git

parent: 9375e267 | 补丁 | 提交 | ignore whitespace

ZhangXianQiang

2024-07-03 eebf6591511daa7c92a7b009a0fef5fb2bea501b

feat:修改pdf查看器

5个文件已修改

	components.d.ts	1 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	index.html	2 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	public/pdfjs/web/viewer.html	2 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/PDFVIewer/index.vue	16 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/folder/index.vue	14 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 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']

 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>

 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>

 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();

 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>

			@@ -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']

			@@ -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>

			@@ -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>

			@@ -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();

			@@ -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>