vue3-components-plus 3.0.30 → 3.0.33

package/dist/ComponentDemo/pdfReade.vue

@@ -1,590 +0,0 @@
-<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>