快捷導(dǎo)航

Vue3+TypeScript項目中安裝PDF.js詳細(xì)的步驟

更新時間：2026年01月12日 10:45:38 作者：BillKu

這篇文章主要介紹了Vue3+TypeScript項目中安裝PDF.js詳細(xì)的步驟,通過示例代碼詳細(xì)介紹了包括安裝步驟、基礎(chǔ)使用示例、創(chuàng)建可復(fù)用PDF查看器組件、注意事項等,需要的朋友可以參考下

1. 安裝 pdfjs-dist

bash

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

2. 安裝類型聲明文件（TypeScript 支持）

bash

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

3. 基礎(chǔ)使用示例

選項 1：直接使用（簡單場景）

vue

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

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

// 設(shè)置 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)
  
  // 設(shè)置縮放
  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>

選項 2：使用 Worker（推薦用于生產(chǎn)）

vue

<template>
  <div>
    <canvas ref="canvasRef"></canvas>
    <div v-if="pageCount">總頁數(shù): {{ 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>

4. 創(chuàng)建可復(fù)用的 PDF 查看器組件

PDFViewer.vue

vue

<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`

// 渲染當(dāng)前頁
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)
  }
}

// 導(dǎo)航方法
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)
}

// 監(jiān)聽頁面變化
watch(currentPage, renderCurrentPage)
watch(scale, renderCurrentPage)

// 監(jiān)聽 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>

5. 使用組件

vue

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

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