Vue3+TypeScript项目中安装PDF.js详细的步骤

npm install pdfjs-dist
# 或者
yarn add pdfjs-dist
# 或者
pnpm add pdfjs-dist

npm install @types/pdfjs-dist
# 或（新版本可能需要）
npm install --save-dev @types/pdfjs-dist

<template>
  <div>
    <canvas ref="canvasRef"></canvas>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as pdfjsLib from 'pdfjs-dist'

// 设置 worker
pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`

const canvasRef = ref<HTMLCanvasElement | null>(null)

onMounted(async () => {
  // 加载 PDF
  const loadingTask = pdfjsLib.getDocument('/path/to/your.pdf')
  const pdf = await loadingTask.promise
  
  // 获取第一页
  const page = await pdf.getPage(1)
  
  // 设置缩放
  const scale = 1.5
  const viewport = page.getViewport({ scale })
  
  // 渲染到 canvas
  const canvas = canvasRef.value
  if (!canvas) return
  
  const context = canvas.getContext('2d')
  canvas.height = viewport.height
  canvas.width = viewport.width
  
  const renderContext = {
    canvasContext: context,
    viewport: viewport
  }
  
  await page.render(renderContext).promise
})
</script>

<template>
  <div>
    <canvas ref="canvasRef"></canvas>
    <div v-if="pageCount">总页数: {{ pageCount }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as pdfjsLib from 'pdfjs-dist'
import type { PDFDocumentProxy } from 'pdfjs-dist/types/src/display/api'

// 使用 worker
pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`
// 或者使用本地 worker
// pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
//   'pdfjs-dist/build/pdf.worker.min.js',
//   import.meta.url
// ).toString()

const canvasRef = ref<HTMLCanvasElement | null>(null)
const pageCount = ref<number>(0)

// 渲染 PDF 页面
const renderPage = async (pdf: PDFDocumentProxy, pageNum: number) => {
  const page = await pdf.getPage(pageNum)
  const scale = 1.5
  const viewport = page.getViewport({ scale })
  
  const canvas = canvasRef.value
  if (!canvas) return
  
  const context = canvas.getContext('2d')
  canvas.height = viewport.height
  canvas.width = viewport.width
  
  const renderContext = {
    canvasContext: context,
    viewport: viewport
  }
  
  await page.render(renderContext).promise
}

// 加载 PDF
const loadPDF = async (url: string) => {
  try {
    const loadingTask = pdfjsLib.getDocument(url)
    const pdf = await loadingTask.promise
    
    pageCount.value = pdf.numPages
    await renderPage(pdf, 1)
    
    return pdf
  } catch (error) {
    console.error('Error loading PDF:', error)
    throw error
  }
}

onMounted(() => {
  // 加载 PDF
  loadPDF('/path/to/your.pdf')
})
</script>

<template>
  <div class="pdf-viewer">
    <div class="toolbar">
      <button @click="prevPage" :disabled="currentPage <= 1">上一页</button>
      <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
      <button @click="nextPage" :disabled="currentPage >= totalPages">下一页</button>
      <input 
        type="number" 
        v-model.number="inputPage" 
        @change="goToPage"
        min="1" 
        :max="totalPages"
      >
      <button @click="zoomIn">放大</button>
      <button @click="zoomOut">缩小</button>
    </div>
    <div class="pdf-container">
      <canvas ref="canvasRef"></canvas>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import * as pdfjsLib from 'pdfjs-dist'
import type { PDFDocumentProxy } from 'pdfjs-dist/types/src/display/api'

interface Props {
  src: string
}

const props = defineProps<Props>()

const canvasRef = ref<HTMLCanvasElement | null>(null)
const currentPage = ref(1)
const totalPages = ref(0)
const inputPage = ref(1)
const scale = ref(1.5)
let pdfInstance: PDFDocumentProxy | null = null

// 配置 worker
pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`

// 渲染当前页
const renderCurrentPage = async () => {
  if (!pdfInstance || !canvasRef.value) return
  
  const page = await pdfInstance.getPage(currentPage.value)
  const viewport = page.getViewport({ scale: scale.value })
  
  const canvas = canvasRef.value
  const context = canvas.getContext('2d')
  
  canvas.height = viewport.height
  canvas.width = viewport.width
  
  const renderContext = {
    canvasContext: context,
    viewport: viewport
  }
  
  await page.render(renderContext).promise
}

// 加载 PDF
const loadPDF = async () => {
  try {
    const loadingTask = pdfjsLib.getDocument(props.src)
    pdfInstance = await loadingTask.promise
    totalPages.value = pdfInstance.numPages
    currentPage.value = 1
    inputPage.value = 1
    await renderCurrentPage()
  } catch (error) {
    console.error('Failed to load PDF:', error)
  }
}

// 导航方法
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
    inputPage.value = currentPage.value
  }
}

const nextPage = () => {
  if (pdfInstance && currentPage.value < pdfInstance.numPages) {
    currentPage.value++
    inputPage.value = currentPage.value
  }
}

const goToPage = () => {
  if (pdfInstance) {
    const pageNum = Math.max(1, Math.min(inputPage.value, pdfInstance.numPages))
    currentPage.value = pageNum
    inputPage.value = pageNum
  }
}

const zoomIn = () => {
  scale.value += 0.25
}

const zoomOut = () => {
  scale.value = Math.max(0.5, scale.value - 0.25)
}

// 监听页面变化
watch(currentPage, renderCurrentPage)
watch(scale, renderCurrentPage)

// 监听 PDF 源变化
watch(() => props.src, loadPDF)

onMounted(loadPDF)
</script>

<style scoped>
.pdf-viewer {
  width: 100%;
  height: 100%;
}

.toolbar {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: #f5f5f5;
  align-items: center;
}

.pdf-container {
  overflow: auto;
  padding: 20px;
}

canvas {
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>

<template>
  <div>
    <PDFViewer src="/path/to/document.pdf" />
  </div>
</template>

<script setup lang="ts">
import PDFViewer from './components/PDFViewer.vue'
</script>