vue3-components-plus 3.0.25 → 3.0.30

package/dist/ComponentDemo/pdfReade.vue

@@ -0,0 +1,590 @@
+<template>
+  <div class="pdf-reader-page">
+    <div class="toolbar">
+      <div class="file-info">
+        <strong>{{ fileTitle }}</strong>
+        <span>{{ statusText }}</span>
+      </div>
+      <button type="button" :disabled="isPrintDisabled" @click="printPdf">
+        {{ isPrinting ? '等待渲染...' : '打印 PDF 区域' }}
+      </button>
+    </div>
+
+    <div ref="pdfWrapperRef" class="pdf-wrapper">
+      <div v-for="pdf in pdfFiles" :key="pdf.id" class="pdf-item">
+        <div class="pdf-item-header">
+          <strong>{{ pdf.name }}</strong>
+          <span>{{ getPdfStatusText(pdf) }}</span>
+        </div>
+
+        <PDF
+          v-if="pdf.data"
+          :key="pdf.viewerKey"
+          :src="pdf.data"
+          pdf-width="100%"
+          :row-gap="12"
+          :show-progress="true"
+          :show-page-tooltip="true"
+          :show-back-to-top-btn="false"
+          @onPdfInit="handlePdfInit(pdf, $event)"
+          @onProgress="handleProgress(pdf, $event)"
+          @onComplete="handleDownloadComplete(pdf)"
+        />
+
+        <div v-else class="loading-state">
+          {{ getPdfStatusText(pdf) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeMount, onMounted, ref } from 'vue'
+import PDF from 'pdf-vue3'
+
+interface PdfFileState {
+  id: number
+  name: string
+  url: string
+  delay: number
+  data: Uint8Array | null
+  totalPages: number
+  progress: number
+  isDownloadComplete: boolean
+  error: string
+  viewerKey: number
+}
+
+const fileTitle = '多个 PDF 异步加载打印测试'
+const pdfWrapperRef = ref<HTMLElement | null>(null)
+const isPrinting = ref(false)
+const pdfAssetUrl = new URL('../assets/驿云通 (11).pdf', import.meta.url).href
+
+const pdfFiles = ref<PdfFileState[]>([
+  createPdfFile(1, '异步 PDF 1 - 驿云通 (11).pdf', 300),
+  createPdfFile(2, '异步 PDF 2 - 驿云通 (11).pdf', 1200),
+  createPdfFile(3, '异步 PDF 3 - 驿云通 (11).pdf', 2200),
+])
+
+const loadedPdfCount = computed(() => pdfFiles.value.filter((pdf) => pdf.data && !pdf.error).length)
+const readyPdfCount = computed(
+  () =>
+    pdfFiles.value.filter(
+      (pdf) => pdf.data && pdf.totalPages > 0 && pdf.isDownloadComplete && !pdf.error,
+    ).length,
+)
+const totalPages = computed(() =>
+  pdfFiles.value.reduce((pageCount, pdf) => pageCount + pdf.totalPages, 0),
+)
+const hasLoadError = computed(() => pdfFiles.value.some((pdf) => pdf.error))
+const isAllPdfReady = computed(
+  () =>
+    pdfFiles.value.length > 0 &&
+    pdfFiles.value.every(
+      (pdf) => pdf.data && pdf.totalPages > 0 && pdf.isDownloadComplete && !pdf.error,
+    ),
+)
+const isPrintDisabled = computed(() => isPrinting.value || !isAllPdfReady.value)
+
+const statusText = computed(() => {
+  if (hasLoadError.value) {
+    return '有 PDF 加载失败，请查看单个文件状态'
+  }
+
+  if (isPrinting.value) {
+    return '正在等待全部 PDF 页面渲染完成'
+  }
+
+  if (!isAllPdfReady.value) {
+    return `异步加载中：${readyPdfCount.value}/${pdfFiles.value.length} 个 PDF 就绪`
+  }
+
+  return `已就绪：${loadedPdfCount.value} 个 PDF，共 ${totalPages.value} 页`
+})
+
+onBeforeMount(() => {
+  resetLegacyPdfWorker()
+})
+
+onMounted(() => {
+  void loadPdfFiles()
+})
+
+function createPdfFile(id: number, name: string, delay: number): PdfFileState {
+  return {
+    id,
+    name,
+    url: pdfAssetUrl,
+    delay,
+    data: null,
+    totalPages: 0,
+    progress: 0,
+    isDownloadComplete: false,
+    error: '',
+    viewerKey: 0,
+  }
+}
+
+async function loadPdfFiles() {
+  await Promise.all(pdfFiles.value.map((pdf) => loadLocalPdf(pdf)))
+}
+
+async function loadLocalPdf(pdf: PdfFileState) {
+  pdf.error = ''
+  pdf.progress = 0
+  pdf.totalPages = 0
+  pdf.isDownloadComplete = false
+  pdf.data = null
+
+  try {
+    await sleep(pdf.delay)
+    pdf.progress = 10
+    resetLegacyPdfWorker()
+
+    const response = await fetch(pdf.url)
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`)
+    }
+
+    pdf.progress = 60
+    const buffer = await response.arrayBuffer()
+
+    resetLegacyPdfWorker()
+    pdf.viewerKey += 1
+    pdf.data = new Uint8Array(buffer)
+    pdf.progress = 100
+  } catch (error) {
+    console.error(error)
+    pdf.error = 'PDF 文件读取失败'
+  }
+}
+
+function resetLegacyPdfWorker() {
+  delete (window as Window & { pdfjsWorker?: unknown }).pdfjsWorker
+}
+
+function getPdfStatusText(pdf: PdfFileState) {
+  if (pdf.error) {
+    return pdf.error
+  }
+
+  if (!pdf.data) {
+    return pdf.progress > 0 ? `异步读取中 ${Math.floor(pdf.progress)}%` : '等待异步加载'
+  }
+
+  if (!pdf.totalPages) {
+    return `解析中 ${Math.floor(pdf.progress)}%`
+  }
+
+  if (!pdf.isDownloadComplete) {
+    return `渲染中 ${Math.floor(pdf.progress)}%`
+  }
+
+  return `${pdf.totalPages} 页，已渲染`
+}
+
+function handlePdfInit(file: PdfFileState, pdf: { numPages?: number }) {
+  file.totalPages = pdf.numPages ?? 0
+}
+
+function handleProgress(file: PdfFileState, progress: number) {
+  file.progress = progress
+}
+
+function handleDownloadComplete(file: PdfFileState) {
+  file.isDownloadComplete = true
+  file.progress = 100
+}
+
+async function printPdf() {
+  if (isPrinting.value) return
+
+  isPrinting.value = true
+
+  try {
+    await waitForAllPagesRendered()
+    await printWrapperCanvases()
+  } catch (error) {
+    console.error(error)
+    window.alert('PDF 页面加载超时，请稍后再试')
+  } finally {
+    isPrinting.value = false
+  }
+}
+
+async function waitForAllPagesRendered(timeout = 30000) {
+  const startTime = Date.now()
+
+  while (Date.now() - startTime < timeout) {
+    await nextTick()
+    await waitFrame()
+
+    if (isAllPdfReady.value && totalPages.value > 0 && areAllCanvasesPainted()) {
+      await waitForStableLayout()
+      return
+    }
+
+    await sleep(100)
+  }
+
+  throw new Error('PDF render timeout')
+}
+
+async function waitForStableLayout() {
+  let previousHeight = -1
+
+  for (let index = 0; index < 5; index += 1) {
+    await waitFrame()
+    await sleep(80)
+
+    const currentHeight = getCanvasContainerHeight()
+    if (currentHeight > 0 && currentHeight === previousHeight) {
+      await waitFrame()
+      await waitFrame()
+      return
+    }
+
+    previousHeight = currentHeight
+  }
+}
+
+function areAllCanvasesPainted() {
+  const canvases = getCanvases()
+
+  return (
+    canvases.length >= totalPages.value &&
+    canvases.every((canvas) => canvas.width > 0 && canvas.height > 0 && isCanvasPainted(canvas))
+  )
+}
+
+function getCanvases() {
+  return Array.from(
+    pdfWrapperRef.value?.querySelectorAll<HTMLCanvasElement>(
+      '.pdf-vue3-canvas-container canvas',
+    ) ?? [],
+  )
+}
+
+async function printWrapperCanvases() {
+  const canvases = getCanvases()
+  if (!canvases.length) {
+    throw new Error('No PDF canvas found')
+  }
+
+  const printFrame = document.createElement('iframe')
+  printFrame.title = 'pdf-wrapper-print'
+  printFrame.style.position = 'fixed'
+  printFrame.style.right = '0'
+  printFrame.style.bottom = '0'
+  printFrame.style.width = '0'
+  printFrame.style.height = '0'
+  printFrame.style.border = '0'
+  document.body.append(printFrame)
+
+  const printDocument = printFrame.contentDocument
+  const printWindow = printFrame.contentWindow
+  if (!printDocument || !printWindow) {
+    printFrame.remove()
+    throw new Error('Print frame unavailable')
+  }
+
+  const pages = canvases
+    .map((canvas) => canvas.toDataURL('image/png'))
+    .map((src) => `<img class="pdf-page" src="${src}" alt="" />`)
+    .join('')
+
+  printDocument.open()
+  printDocument.write(`
+    <!doctype html>
+    <html>
+      <head>
+        <meta charset="utf-8" />
+        <title>PDF Print</title>
+        <style>
+          @page {
+            margin: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            padding: 0;
+            background: #fff;
+          }
+
+          .pdf-page {
+            display: block;
+            width: 100%;
+            height: auto;
+            break-after: page;
+            page-break-after: always;
+          }
+
+          .pdf-page:last-child {
+            break-after: auto;
+            page-break-after: auto;
+          }
+        </style>
+      </head>
+      <body>${pages}</body>
+    </html>
+  `)
+  printDocument.close()
+
+  await waitForPrintFrameImages(printDocument)
+  printWindow.focus()
+  printWindow.print()
+
+  window.setTimeout(() => {
+    printFrame.remove()
+  }, 1000)
+}
+
+function waitForPrintFrameImages(printDocument: Document) {
+  const images = Array.from(printDocument.images)
+
+  return Promise.all(
+    images.map((image) => {
+      if (image.complete) {
+        return Promise.resolve()
+      }
+
+      return new Promise<void>((resolve, reject) => {
+        image.onload = () => resolve()
+        image.onerror = () => reject(new Error('Print image failed to load'))
+      })
+    }),
+  )
+}
+
+function getCanvasContainerHeight() {
+  return pdfWrapperRef.value?.querySelector('.pdf-vue3-canvas-container')?.scrollHeight ?? 0
+}
+
+function isCanvasPainted(canvas: HTMLCanvasElement) {
+  const context = canvas.getContext('2d')
+  if (!context) return false
+
+  const points = [
+    [0.5, 0.5],
+    [0.25, 0.25],
+    [0.75, 0.25],
+    [0.25, 0.75],
+    [0.75, 0.75],
+  ]
+
+  try {
+    return points.some(([xRatio, yRatio]) => {
+      const x = Math.max(0, Math.min(canvas.width - 1, Math.floor(canvas.width * xRatio)))
+      const y = Math.max(0, Math.min(canvas.height - 1, Math.floor(canvas.height * yRatio)))
+      return context.getImageData(x, y, 1, 1).data[3] > 0
+    })
+  } catch {
+    return canvas.width > 0 && canvas.height > 0
+  }
+}
+
+function waitFrame() {
+  return new Promise<void>((resolve) => {
+    requestAnimationFrame(() => resolve())
+  })
+}
+
+function sleep(duration: number) {
+  return new Promise<void>((resolve) => {
+    window.setTimeout(resolve, duration)
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.pdf-reader-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 720px;
+  background: #f3f5f8;
+}
+
+.toolbar {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 18px;
+  border-bottom: 1px solid #d8dee8;
+  background: #ffffff;
+
+  .file-info {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+    color: #1f2937;
+
+    strong,
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    span {
+      color: #64748b;
+      font-size: 13px;
+    }
+  }
+
+  button {
+    flex: none;
+    min-width: 88px;
+    height: 36px;
+    padding: 0 16px;
+    border: 1px solid #2563eb;
+    border-radius: 4px;
+    background: #2563eb;
+    color: #ffffff;
+    cursor: pointer;
+
+    &:disabled {
+      border-color: #b8c2d6;
+      background: #b8c2d6;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.pdf-wrapper {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.pdf-item {
+  background: #e9edf3;
+
+  & + & {
+    border-top: 1px solid #cbd5e1;
+  }
+}
+
+.pdf-item-header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 10px 18px;
+  border-bottom: 1px solid #d8dee8;
+  background: #ffffff;
+  color: #1f2937;
+
+  strong,
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  span {
+    flex: none;
+    color: #64748b;
+    font-size: 13px;
+  }
+}
+
+.loading-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 360px;
+  color: #475569;
+  font-size: 14px;
+}
+
+:deep(.pdf-vue3-scroller) {
+  background: #e9edf3;
+}
+
+:deep(.pdf-vue3-canvas-container) {
+  padding: 18px 0;
+}
+
+@media (max-width: 768px) {
+  .pdf-reader-page {
+    min-height: 100vh;
+  }
+
+  .toolbar {
+    align-items: stretch;
+    flex-direction: column;
+
+    button {
+      width: 100%;
+    }
+  }
+}
+
+@media print {
+  .pdf-reader-page {
+    display: block;
+    height: auto;
+    min-height: auto;
+    background: #ffffff;
+  }
+
+  .toolbar {
+    display: none !important;
+  }
+
+  .pdf-item {
+    background: #ffffff !important;
+    break-after: page;
+    page-break-after: always;
+
+    &:last-child {
+      break-after: auto;
+      page-break-after: auto;
+    }
+  }
+
+  .pdf-item-header {
+    display: none !important;
+  }
+
+  .pdf-wrapper,
+  :deep(.pdf-vue3-main),
+  :deep(.pdf-vue3-container),
+  :deep(.pdf-vue3-scroller) {
+    height: auto !important;
+    max-height: none !important;
+    overflow: visible !important;
+    background: #ffffff !important;
+  }
+
+  :deep(.pdf-vue3-canvas-container) {
+    width: 100% !important;
+    padding: 0 !important;
+  }
+
+  :deep(.pdf-vue3-canvas-container canvas) {
+    width: 100% !important;
+    height: auto !important;
+    margin: 0 auto !important;
+    box-shadow: none !important;
+    break-after: page;
+    page-break-after: always;
+  }
+
+  :deep(.pdf-vue3-progress),
+  :deep(.pdf-vue3-pageTooltip),
+  :deep(.pdf-vue3-backToTopBtn) {
+    display: none !important;
+  }
+}
+</style>