product css update

tj

2025-05-07 bf95e4d3b3e96e9f6ac87a572bcbd223de50e637

 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>