npm install pdfjs-dist

# 從 node_modules 復(fù)制 worker 文件到 public 目錄
copy node_modules\pdfjs-dist\build\pdf.worker.min.mjs public\pdf.worker.min.mjs

import * as pdfjsLib from 'pdfjs-dist'

// 方式1: 使用本地 worker 文件（推薦，穩(wěn)定可靠）
pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.mjs'

// 方式2: 使用 CDN（備選方案，需要網(wǎng)絡(luò)連接）
// pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`

export default defineConfig({
  // ... 其他配置
  build: {
    target: 'es2015',
    rollupOptions: {
      output: {
        format: 'es'
      }
    }
  },
  optimizeDeps: {
    include: ['pdfjs-dist', 'pdfjs-dist/web/pdf_viewer.mjs']
  }
})

<template>
  <div class="pdf-viewer-container">
    <!-- 文件上傳 -->
    <el-upload :on-change="handleFileChange">
      <el-button>選擇 PDF 文件</el-button>
    </el-upload>
    <!-- 控制按鈕 -->
    <div v-if="pdfDoc">
      <el-button @click="previousPage">上一頁(yè)</el-button>
      <el-button>{{ currentPage }} / {{ totalPages }}</el-button>
      <el-button @click="nextPage">下一頁(yè)</el-button>
      <el-button @click="zoomIn">放大</el-button>
      <el-button @click="zoomOut">縮小</el-button>
    </div>
    <!-- Canvas 渲染 -->
    <div class="pdf-viewer">
      <canvas ref="pdfCanvas"></canvas>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as pdfjsLib from 'pdfjs-dist'

// 設(shè)置 worker
pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.mjs'

// 響應(yīng)式數(shù)據(jù)
const pdfDoc = ref<any>(null)
const currentPage = ref(1)
const totalPages = ref(0)
const scale = ref(1.5)
const pdfCanvas = ref<HTMLCanvasElement | null>(null)

// 加載 PDF
const loadPdf = async (data: Uint8Array) => {
  const loadingTask = pdfjsLib.getDocument({ data })
  pdfDoc.value = await loadingTask.promise
  totalPages.value = pdfDoc.value.numPages
  await renderPage(1)
}

// 渲染頁(yè)面
const renderPage = async (pageNum: number) => {
  const page = await pdfDoc.value.getPage(pageNum)
  const viewport = page.getViewport({ scale: scale.value })
  
  const canvas = pdfCanvas.value
  if (!canvas) return
  
  canvas.height = viewport.height
  canvas.width = viewport.width
  
  const context = canvas.getContext('2d')
  await page.render({
    canvasContext: context,
    viewport: viewport
  }).promise
}
</script>

<template>
  <div class="pdf-viewer-container">
    <!-- 文件上傳 -->
    <el-upload :on-change="handleFileChange">
      <el-button>選擇 PDF 文件</el-button>
    </el-upload>
    <!-- 所有頁(yè)面容器 -->
    <div class="pdf-viewer" ref="pdfViewer">
      <div v-for="pageNum in totalPages" :key="pageNum" :data-page="pageNum">
        <div class="page-header">第 {{ pageNum }} 頁(yè)</div>
        <div class="page-content">
          <canvas class="page-canvas"></canvas>
          <div class="text-layer"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as pdfjsLib from 'pdfjs-dist'

// 懶加載相關(guān)
const renderingPages = ref<Set<number>>(new Set())
const renderedPages = ref<Set<number>>(new Set())
let intersectionObserver: IntersectionObserver | null = null

// 初始化懶加載
const initLazyLoading = async () => {
  intersectionObserver = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const pageNum = parseInt(entry.target.getAttribute('data-page') || '0')
          if (pageNum > 0 && !renderedPages.value.has(pageNum)) {
            renderPage(pageNum)
          }
        }
      })
    },
    {
      rootMargin: '200px 0px', // 提前 200px 開(kāi)始加載
      threshold: 0.01
    }
  )

  // 觀(guān)察所有頁(yè)面容器
  for (let pageNum = 1; pageNum <= totalPages.value; pageNum++) {
    const pageWrapper = pdfViewer.value?.querySelector(`[data-page="${pageNum}"]`)
    if (pageWrapper) {
      intersectionObserver.observe(pageWrapper)
    }
  }

  // 立即渲染前幾頁(yè)
  for (let pageNum = 1; pageNum <= Math.min(3, totalPages.value); pageNum++) {
    renderPage(pageNum)
  }
}

// 渲染單個(gè)頁(yè)面（包含文本層）
const renderPage = async (pageNum: number) => {
  if (renderingPages.value.has(pageNum) || renderedPages.value.has(pageNum)) {
    return
  }

  renderingPages.value.add(pageNum)

  const pageWrapper = pdfViewer.value?.querySelector(`[data-page="${pageNum}"]`)
  const canvas = pageWrapper?.querySelector('canvas') as HTMLCanvasElement
  const textLayer = pageWrapper?.querySelector('.text-layer') as HTMLElement

  const page = await pdfDoc.value.getPage(pageNum)
  const viewport = page.getViewport({ scale: scale.value })

  // 渲染 Canvas
  canvas.height = viewport.height
  canvas.width = viewport.width
  const context = canvas.getContext('2d')
  await page.render({
    canvasContext: context,
    viewport: viewport
  }).promise

  // 渲染文本層（用于文字選擇和復(fù)制）
  const textContent = await page.getTextContent()
  // ... 文本層渲染邏輯

  renderingPages.value.delete(pageNum)
  renderedPages.value.add(pageNum)
}
</script>

<template>
  <div class="pdf-viewer-container">
    <div class="pdf-controls">
      <el-upload :on-change="handleFileChange">
        <el-button>選擇 PDF 文件</el-button>
      </el-upload>
    </div>
    <div class="pdf-viewer-wrapper">
      <div ref="pdfViewerContainer" class="pdf-viewer-container-inner"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as pdfjsLib from 'pdfjs-dist'
import { PDFViewer, EventBus, PDFLinkService } from 'pdfjs-dist/web/pdf_viewer.mjs'
import 'pdfjs-dist/web/pdf_viewer.css'

// 設(shè)置 worker
pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.mjs'

let pdfViewer: PDFViewer | null = null
let eventBus: EventBus | null = null
const pdfViewerContainer = ref<HTMLElement | null>(null)

// 初始化 PDF 查看器
const initPDFViewer = async (pdfDocument: any) => {
  const container = pdfViewerContainer.value
  
  // 創(chuàng)建滾動(dòng)容器（必須是絕對(duì)定位）
  const scrollContainer = document.createElement('div')
  scrollContainer.className = 'pdf-viewer-scroll'
  scrollContainer.style.position = 'absolute'
  scrollContainer.style.top = '0'
  scrollContainer.style.left = '0'
  scrollContainer.style.width = '100%'
  scrollContainer.style.height = '100%'
  scrollContainer.style.overflow = 'auto'
  
  // 創(chuàng)建查看器容器
  const viewer = document.createElement('div')
  viewer.className = 'pdfViewer'
  
  scrollContainer.appendChild(viewer)
  container.appendChild(scrollContainer)

  // 創(chuàng)建事件總線(xiàn)和鏈接服務(wù)
  eventBus = new EventBus()
  const linkService = new PDFLinkService({
    eventBus: eventBus,
    externalLinkTarget: 2
  })

  // 創(chuàng)建 PDFViewer 實(shí)例
  pdfViewer = new PDFViewer({
    container: scrollContainer,  // 外層滾動(dòng)容器（必須絕對(duì)定位）
    viewer: viewer,              // 內(nèi)層查看器容器
    eventBus: eventBus,
    linkService: linkService
  })

  // 設(shè)置 PDF 文檔
  pdfViewer.setDocument(pdfDocument)

  // 監(jiān)聽(tīng)事件
  eventBus.on('pagesinit', () => {
    totalPages.value = pdfViewer?.pagesCount || 0
  })

  eventBus.on('scalechanging', (evt: any) => {
    currentScale.value = evt.scale
  })
}

// 清理
onUnmounted(() => {
  if (pdfViewer) {
    pdfViewer.cleanup()
  }
})
</script>

scrollContainer.style.position = 'absolute'

import 'pdfjs-dist/web/pdf_viewer.css'

<template>
  <div class="pdf-viewer-container">
    <el-upload :on-change="handleFileChange">
      <el-button>選擇 PDF 文件</el-button>
    </el-upload>
    <div class="pdf-viewer-wrapper">
      <iframe
        v-if="viewerUrl"
        :src="viewerUrl"
        class="pdf-viewer-iframe"
        frameborder="0"
      ></iframe>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import * as pdfjsLib from 'pdfjs-dist'

// 設(shè)置 worker（注意：路徑已更新）
pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdfjs-dist/build/pdf.worker.min.mjs'

const pdfUrl = ref<string>('')
const viewerUrl = ref<string>('')

// 檢查本地查看器是否存在
const checkLocalViewer = async (): Promise<boolean> => {
  try {
    const response = await fetch('/pdfjs-dist/web/viewer.html', { method: 'HEAD' })
    return response.ok
  } catch {
    return false
  }
}

// 加載 PDF
const loadPdf = async (file: File) => {
  // 清理舊的 URL
  if (pdfUrl.value) {
    URL.revokeObjectURL(pdfUrl.value)
  }

  // 創(chuàng)建 Blob URL
  const blob = new Blob([file], { type: 'application/pdf' })
  const url = URL.createObjectURL(blob)
  pdfUrl.value = url

  // 檢查本地查看器是否存在
  const hasLocalViewer = await checkLocalViewer()
  
  if (!hasLocalViewer) {
    // 本地查看器不存在，提示用戶(hù)配置
    console.error('本地查看器未找到，請(qǐng)按照以下步驟配置：')
    console.error('1. 訪(fǎng)問(wèn) https://github.com/mozilla/pdf.js/releases 下載最新版本')
    console.error('2. 解壓后將 web 目錄復(fù)制到 public/pdfjs-dist/web/')
    console.error('3. 確保 viewer.html 的路徑是 /pdfjs-dist/web/viewer.html')
    return
  }

  // ? 必須使用本地查看器（避免跨域問(wèn)題）
  // ?? CDN 版本無(wú)法訪(fǎng)問(wèn) Blob URL，會(huì)導(dǎo)致跨域錯(cuò)誤
  const viewerPath = '/pdfjs-dist/web/viewer.html'
  const encodedUrl = encodeURIComponent(url)
  viewerUrl.value = `${viewerPath}?file=${encodedUrl}`
}

// 清理資源
onUnmounted(() => {
  if (pdfUrl.value) {
    URL.revokeObjectURL(pdfUrl.value)
  }
})
</script>

# 將 web 目錄復(fù)制到 public/pdfjs-dist/web/
# 最終結(jié)構(gòu)應(yīng)該是：
public/
  └── pdfjs-dist/
      ├── build/
      │   └── pdf.worker.min.mjs
      └── web/
          ├── viewer.html
          ├── viewer.js
          ├── viewer.css
          └── ... (其他文件)

// ? 推薦方式1: 放在 public 根目錄
pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.mjs'

// ? 推薦方式2: 放在 public/pdfjs-dist/build/ 目錄（與官方查看器結(jié)構(gòu)一致）
pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdfjs-dist/build/pdf.worker.min.mjs'

// ? 不推薦（可能有跨域問(wèn)題）
pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/...`

// 驗(yàn)證文件類(lèi)型
if (file.type !== 'application/pdf' && !file.name.endsWith('.pdf')) {
  throw new Error('請(qǐng)選擇 PDF 格式的文件')
}

// 驗(yàn)證 PDF 文件頭
const header = String.fromCharCode(...uint8Array.slice(0, 4))
if (header !== '%PDF') {
  throw new Error('無(wú)效的 PDF 文件格式')
}

try {
  await loadPdf(data)
} catch (error: any) {
  let errorMessage = 'PDF 加載失敗'
  if (error?.name === 'InvalidPDFException') {
    errorMessage = '無(wú)效的 PDF 文件結(jié)構(gòu)，請(qǐng)確認(rèn)文件是否損壞'
  } else if (error?.name === 'MissingPDFException') {
    errorMessage = 'PDF 文件缺失或無(wú)法訪(fǎng)問(wèn)'
  }
  $message?.error(errorMessage)
}

// 清理 Blob URL
onUnmounted(() => {
  if (pdfUrl.value) {
    URL.revokeObjectURL(pdfUrl.value)
  }
  if (pdfViewer) {
    pdfViewer.cleanup()
  }
})

// 獲取文本內(nèi)容
const textContent = await page.getTextContent()

// 創(chuàng)建文本層元素
textContent.items.forEach((item: any) => {
  const span = document.createElement('span')
  span.textContent = item.str
  span.style.position = 'absolute'
  span.style.color = 'transparent' // 透明，不影響視覺(jué)效果
  span.style.cursor = 'text'
  textLayer.appendChild(span)
})

// ? 正確：使用本地查看器
const viewerPath = '/pdfjs-dist/web/viewer.html'

// ? 錯(cuò)誤：CDN 版本無(wú)法訪(fǎng)問(wèn) Blob URL
const viewerPath = 'https://mozilla.github.io/pdf.js/web/viewer.html'