From bf95e4d3b3e96e9f6ac87a572bcbd223de50e637 Mon Sep 17 00:00:00 2001
From: tj <1378534974@qq.com>
Date: 星期三, 07 五月 2025 09:14:25 +0800
Subject: [PATCH] product css update
---
src/components/pdf/PdfViewerFull.vue | 50 +++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 47 insertions(+), 3 deletions(-)
diff --git a/src/components/pdf/PdfViewerFull.vue b/src/components/pdf/PdfViewerFull.vue
index d26a04d..27c7d69 100644
--- a/src/components/pdf/PdfViewerFull.vue
+++ b/src/components/pdf/PdfViewerFull.vue
@@ -1,15 +1,14 @@
<template>
<div class="pdf-full-view">
<div v-for="(item, index) in canvases" :key="index" class="pdf-page">
- <canvas :ref="el => canvasRefs[index] = el"></canvas>
+ <canvas :ref="el => canvasRefs[index] = el" style="width: 100%;"></canvas>
</div>
</div>
</template>
-<script setup lang="ts">
+<!-- <script setup lang="ts">
import { ref, onMounted, watch ,nextTick } from 'vue'
import * as pdfjsLib from 'pdfjs-dist'
-import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
@@ -45,14 +44,59 @@
}
onMounted(renderAllPages)
+</script> -->
+
+<script setup lang="ts">
+import { ref, onMounted, watch, nextTick } from 'vue'
+import * as pdfjsLib from 'pdfjs-dist'
+
+// ✅ 正确设置 worker 路径（Vite 项目用这种方式）
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
+ 'pdfjs-dist/build/pdf.worker.min.js',
+ import.meta.url
+).toString()
+
+const props = defineProps<{
+ src: string
+ scale?: number
+}>()
+
+const canvasRefs: HTMLCanvasElement[] = []
+const canvases = ref<number[]>([])
+const pdfDoc = ref<any>(null)
+const scale = props.scale ?? 1.2
+
+const renderAllPages = async () => {
+ const loadingTask = pdfjsLib.getDocument(props.src)
+ pdfDoc.value = await loadingTask.promise
+ const numPages = pdfDoc.value.numPages
+ canvases.value = Array.from({ length: numPages }, (_, i) => i + 1)
+
+ await nextTick()
+
+ for (let pageNum = 1; pageNum <= numPages; pageNum++) {
+ const page = await pdfDoc.value.getPage(pageNum)
+ const viewport = page.getViewport({ scale })
+ const canvas = canvasRefs[pageNum - 1]
+ if (!canvas) continue
+ const context = canvas.getContext('2d')
+ canvas.height = viewport.height
+ canvas.width = viewport.width
+ await page.render({ canvasContext: context!, viewport }).promise
+ }
+}
+
+onMounted(renderAllPages)
</script>
<style scoped>
.pdf-full-view {
text-align: center;
+ width: 100%;
}
.pdf-page {
margin-bottom: 20px;
+ width: 100%;
}
</style>
--
Gitblit v1.9.3