product css update

tj

2025-05-07 bf95e4d3b3e96e9f6ac87a572bcbd223de50e637

 src/components/pdf/PdfViewerFull.vue

@@ -6,10 +6,9 @@
  </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,6 +44,49 @@
}

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>