首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3+TypeScript安装PDF.js

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

2026-01-12 10:36:52 作者：BillKu

这篇文章主要介绍了Vue3+TypeScript项目中安装PDF.js详细的步骤,通过示例代码详细介绍了包括安装步骤、基础使用示例、创建可复用PDF查看器组件、注意事项等,需要的朋友可以参考下

在 Vue 3 + TypeScript 项目中安装和使用 pdfjs-dist（PDF.js），以下是详细的步骤：

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. 基础使用示例

选项 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'

// 设置 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>

选项 2：使用 Worker（推荐用于生产）

vue

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

4. 创建可复用的 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`

// 渲染当前页
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>

5. 使用组件

vue

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

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

注意事项

Worker 配置：生产环境中建议使用 worker 提高性能
版本兼容性：确保 pdfjs-dist 和 @types/pdfjs-dist 版本兼容
CDN 或本地：可以选择使用 CDN 或本地 worker 文件
内存管理：大型 PDF 注意内存管理，及时清理资源
错误处理：添加适当的错误处理机制

这样你就可以在 Vue 3 + TypeScript 项目中成功使用 PDF.js 了！

总结

到此这篇关于Vue3+TypeScript项目中安装PDF.js详细步骤的文章就介绍到这了,更多相关Vue3+TypeScript安装PDF.js内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！