vue3-components-plus 3.0.25 → 3.0.30

package/dist/ComponentDemo/PdfDemo copy.vue

@@ -0,0 +1,234 @@
+<template>
+  <div class="demo-container">
+    <div class="control-panel">
+      <h3>PDF 文档预览演示</h3>
+
+      <!-- 本地PDF文件 -->
+      <div class="local-section">
+        <h4>本地PDF文件</h4>
+        <span class="file-name">驿云通 (11).pdf</span>
+        <button @click="loadLocalPdf">加载本地文件</button>
+        <button @click="printPdf" :disabled="!currentUrl">打印</button>
+      </div>
+
+      <!-- 文件上传方式 -->
+      <div class="upload-section">
+        <h4>方式一：文件上传</h4>
+        <input
+          type="file"
+          @change="importPdf(($event.target as any)?.files?.[0])"
+          accept=".pdf"
+        />
+        <button @click="clearFile" :disabled="!file">清除文件</button>
+      </div>
+
+      <!-- URL方式 -->
+      <div class="url-section">
+        <h4>方式二：URL地址</h4>
+        <input
+          v-model="pdfUrl"
+          type="text"
+          placeholder="请输入PDF文档的URL地址"
+          class="url-input"
+        />
+        <button @click="loadFromUrl" :disabled="!pdfUrl.trim()">加载URL</button>
+        <button @click="clearUrl" :disabled="!pdfUrl">清除URL</button>
+      </div>
+
+      <!-- 搜索功能 -->
+      <div class="search-section">
+        <h4>文档搜索</h4>
+        <input
+          v-model="searchKeyword"
+          type="text"
+          placeholder="输入要搜索的关键字"
+          class="search-input"
+        />
+        <button @click="clickPdf" :disabled="!searchKeyword.trim()">搜索</button>
+      </div>
+    </div>
+
+    <!-- PDF组件 -->
+    <div class="pdf-container">
+      <NsPdf
+        v-if="counts"
+        ref="pdfRef"
+        :url="currentUrl"
+        :hasTool="true">
+      </NsPdf>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from 'vue'
+import localPdfUrl from '@/assets/驿云通 (11).pdf'
+
+const counts = ref(true)
+const file = ref()
+const pdfRef = ref()
+const pdfUrl = ref('')
+const currentUrl = ref('')
+const searchKeyword = ref('')
+
+function loadLocalPdf() {
+  pdfUrl.value = ''
+  file.value = null
+  currentUrl.value = localPdfUrl
+}
+
+function printPdf() {
+  if (!currentUrl.value) return
+  window.print()
+}
+
+function importPdf(f: any) {
+  pdfUrl.value = ''
+  file.value = f
+
+  if (f && f.name.endsWith('.pdf')) {
+    const fileUrl = URL.createObjectURL(f)
+    currentUrl.value = fileUrl
+  } else if (f) {
+    alert('请选择PDF文件')
+    clearFile()
+  }
+}
+
+function loadFromUrl() {
+  if (pdfUrl.value.trim()) {
+    clearFile()
+    currentUrl.value = pdfUrl.value.trim()
+  }
+}
+
+function clearFile() {
+  file.value = null
+  if (currentUrl.value.startsWith('blob:')) {
+    URL.revokeObjectURL(currentUrl.value)
+  }
+  currentUrl.value = ''
+}
+
+function clearUrl() {
+  pdfUrl.value = ''
+  currentUrl.value = ''
+}
+
+function clickPdf() {
+  if (searchKeyword.value.trim() && pdfRef.value) {
+    pdfRef.value.search(searchKeyword.value.trim())
+  }
+}
+
+function reloadComponent() {
+  counts.value = false
+  nextTick(() => {
+    counts.value = true
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.demo-container {
+  padding: 20px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.control-panel {
+  background: #f5f5f5;
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+
+  h3 {
+    margin: 0 0 20px 0;
+    color: #333;
+  }
+
+  h4 {
+    margin: 15px 0 10px 0;
+    color: #666;
+    font-size: 14px;
+  }
+}
+
+.local-section,
+.upload-section,
+.url-section,
+.search-section {
+  margin-bottom: 20px;
+  padding: 15px;
+  background: white;
+  border-radius: 6px;
+  border: 1px solid #e0e0e0;
+
+  input[type='file'] {
+    margin-right: 10px;
+  }
+
+  .url-input,
+  .search-input {
+    width: 300px;
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    margin-right: 10px;
+    font-size: 14px;
+
+    &:focus {
+      outline: none;
+      border-color: #409eff;
+    }
+  }
+
+  button {
+    padding: 8px 16px;
+    background: #409eff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-right: 10px;
+    font-size: 14px;
+
+    &:hover:not(:disabled) {
+      background: #337ecc;
+    }
+
+    &:disabled {
+      background: #c0c4cc;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.pdf-container {
+  height: 600px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+
+@media (max-width: 768px) {
+  .url-input,
+  .search-input {
+    width: 100% !important;
+    margin-bottom: 10px;
+  }
+}
+
+@media print {
+  .control-panel {
+    display: none !important;
+  }
+
+  .pdf-container {
+    height: auto !important;
+    border: none !important;
+    overflow: visible !important;
+  }
+}
+</style>

package/dist/ComponentDemo/PdfDemo.vue

@@ -3,6 +3,14 @@
     <div class="control-panel">
       <h3>PDF 文档预览演示</h3>
 
+      <!-- 本地PDF文件 -->
+      <div class="local-section">
+        <h4>本地PDF文件</h4>
+        <span class="file-name">驿云通 (11).pdf</span>
+        <button @click="loadLocalPdf">加载本地文件</button>
+        <button @click="printPdf" :disabled="!currentUrl">打印</button>
+      </div>
+
       <!-- 文件上传方式 -->
       <div class="upload-section">
         <h4>方式一：文件上传</h4>
@@ -54,23 +62,31 @@
 
 <script setup lang="ts">
 import { ref, nextTick } from 'vue'
+import localPdfUrl from '@/assets/驿云通 (11).pdf'
 
 const counts = ref(true)
 const file = ref()
 const pdfRef = ref()
-const pdfUrl = ref(
-  'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf',
-)
-const currentUrl = ref(pdfUrl.value)
+const pdfUrl = ref('')
+const currentUrl = ref('')
 const searchKeyword = ref('')
 
+function loadLocalPdf() {
+  pdfUrl.value = ''
+  file.value = null
+  currentUrl.value = localPdfUrl
+}
+
+function printPdf() {
+  if (!currentUrl.value) return
+  window.print()
+}
+
 function importPdf(f: any) {
-  // 清除URL，使用文件上传
   pdfUrl.value = ''
   file.value = f
 
   if (f && f.name.endsWith('.pdf')) {
-    // 创建文件URL
     const fileUrl = URL.createObjectURL(f)
     currentUrl.value = fileUrl
   } else if (f) {
@@ -81,7 +97,6 @@ function importPdf(f: any) {
 
 function loadFromUrl() {
   if (pdfUrl.value.trim()) {
-    // 清除文件，使用URL
     clearFile()
     currentUrl.value = pdfUrl.value.trim()
   }
@@ -106,7 +121,6 @@ function clickPdf() {
   }
 }
 
-// 重新加载组件
 function reloadComponent() {
   counts.value = false
   nextTick(() => {
@@ -140,6 +154,7 @@ function reloadComponent() {
   }
 }
 
+.local-section,
 .upload-section,
 .url-section,
 .search-section {
@@ -204,4 +219,16 @@ function reloadComponent() {
     margin-bottom: 10px;
   }
 }
+
+@media print {
+  .control-panel {
+    display: none !important;
+  }
+
+  .pdf-container {
+    height: auto !important;
+    border: none !important;
+    overflow: visible !important;
+  }
+}
 </style>

package/dist/ComponentDemo/pdfReade copy.vue

@@ -0,0 +1,369 @@
+<template>
+  <div class="pdf-reader-page">
+    <div class="toolbar">
+      <div class="file-info">
+        <strong>{{ fileName }}</strong>
+        <span>{{ statusText }}</span>
+      </div>
+      <button type="button" :disabled="isPrinting || !pdfData || !totalPages" @click="printPdf">
+        {{ isPrinting ? 'Loading...' : 'Print' }}
+      </button>
+    </div>
+
+    <div ref="pdfWrapperRef" class="pdf-wrapper">
+      <PDF
+        v-if="pdfData"
+        :key="viewerKey"
+        :src="pdfData"
+        pdf-width="100%"
+        :row-gap="12"
+        :show-progress="true"
+        :show-page-tooltip="true"
+        :show-back-to-top-btn="false"
+        @onPdfInit="handlePdfInit"
+        @onProgress="handleProgress"
+        @onComplete="handleDownloadComplete"
+      />
+      <div v-else class="loading-state">
+        {{ statusText }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeMount, onMounted, ref } from 'vue'
+import PDF from 'pdf-vue3'
+
+const fileName = 'yiyuntong-11.pdf'
+const pdfWrapperRef = ref<HTMLElement | null>(null)
+const pdfData = ref<Uint8Array | null>(null)
+const totalPages = ref(0)
+const loadProgress = ref(0)
+const isDownloadComplete = ref(false)
+const isPrinting = ref(false)
+const loadError = ref('')
+const viewerKey = ref(0)
+const pdfAssetUrl = new URL('../assets/驿云通 (11).pdf', import.meta.url).href
+
+const statusText = computed(() => {
+  if (loadError.value) {
+    return loadError.value
+  }
+
+  if (!pdfData.value) {
+    return `Reading PDF ${Math.floor(loadProgress.value)}%`
+  }
+
+  if (!totalPages.value) {
+    return `Loading ${Math.floor(loadProgress.value)}%`
+  }
+
+  if (isPrinting.value) {
+    return 'Waiting for all pages to render'
+  }
+
+  return `${totalPages.value} pages`
+})
+
+onBeforeMount(() => {
+  resetLegacyPdfWorker()
+})
+
+onMounted(() => {
+  loadLocalPdf()
+})
+
+async function loadLocalPdf() {
+  loadError.value = ''
+  loadProgress.value = 10
+  totalPages.value = 0
+  isDownloadComplete.value = false
+  pdfData.value = null
+
+  try {
+    resetLegacyPdfWorker()
+
+    const response = await fetch(pdfAssetUrl)
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`)
+    }
+
+    loadProgress.value = 60
+    const buffer = await response.arrayBuffer()
+
+    resetLegacyPdfWorker()
+    viewerKey.value += 1
+    pdfData.value = new Uint8Array(buffer)
+    loadProgress.value = 100
+  } catch (error) {
+    console.error(error)
+    loadError.value = 'PDF file read failed'
+  }
+}
+
+function resetLegacyPdfWorker() {
+  delete (window as Window & { pdfjsWorker?: unknown }).pdfjsWorker
+}
+
+function handlePdfInit(pdf: { numPages?: number }) {
+  totalPages.value = pdf.numPages ?? 0
+}
+
+function handleProgress(progress: number) {
+  loadProgress.value = progress
+}
+
+function handleDownloadComplete() {
+  isDownloadComplete.value = true
+  loadProgress.value = 100
+}
+
+async function printPdf() {
+  if (isPrinting.value) return
+
+  isPrinting.value = true
+
+  try {
+    await waitForAllPagesRendered()
+    window.print()
+  } catch (error) {
+    console.error(error)
+    window.alert('PDF page loading timed out, please try again later')
+  } finally {
+    isPrinting.value = false
+  }
+}
+
+async function waitForAllPagesRendered(timeout = 30000) {
+  const startTime = Date.now()
+
+  while (Date.now() - startTime < timeout) {
+    await nextTick()
+    await waitFrame()
+
+    if (isDownloadComplete.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',
+    ) ?? [],
+  )
+}
+
+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;
+}
+
+.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-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>