使用 Vue + PDF.js 构建在线 PDF 阅读器（支持目录与缩放）

一、项目简介

本项目使用 Vue 3 搭配 PDF.js 构建一个支持目录、页面缩放和页码跳转的 PDF 在线阅读器组件，适用于后台管理系统、在线文档平台、电子书阅读等场景。

核心功能包括：

• 支持加载远程 PDF 文件
• 页面跳转与缩放控制
• 渲染页码与总页数
• 目录大纲展示
• 自适应页面宽度

---

二、项目结构

使用以下目录结构组织组件与逻辑：

---

三、PDF.js 引入与使用

3.1 安装依赖

npm install pdfjs-dist

3.2 初始化 PDF.js Worker

// src/utils/pdfWorker.js
import * as pdfjsLib from 'pdfjs-dist';
import pdfWorker from 'pdfjs-dist/build/pdf.worker.entry';

pdfjsLib.GlobalWorkerOptions.workerSrc = pdfWorker;

export default pdfjsLib;

---

四、核心组件开发：PdfViewer.vue

4.1 组件模板结构

<template>
  <div class="pdf-container">
    <div class="pdf-controls">
      <button @click="prevPage">上一页</button>
      <span>{{ currentPage }} / {{ totalPages }}</span>
      <button @click="nextPage">下一页</button>
      <select v-model="scale">
        <option v-for="s in [0.5, 1, 1.5, 2]" :key="s" :value="s">缩放 {{ s }}x</option>
      </select>
    </div>
    <canvas ref="canvasRef"></canvas>
  </div>
</template>

4.2 组件逻辑功能

// src/components/PdfViewer.vue
<script setup>
import { ref, onMounted, watch } from 'vue';
import pdfjsLib from '@/utils/pdfWorker';

const props = defineProps({
  pdfUrl: String
});

const pdfDoc = ref(null);
const currentPage = ref(1);
const totalPages = ref(0);
const scale = ref(1);
const canvasRef = ref(null);

const renderPage = async (pageNum) => {
  const page = await pdfDoc.value.getPage(pageNum);
  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;
};

const loadPdf = async () => {
  const loadingTask = pdfjsLib.getDocument(props.pdfUrl);
  pdfDoc.value = await loadingTask.promise;
  totalPages.value = pdfDoc.value.numPages;
  renderPage(currentPage.value);
};

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
  }
};

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
};

watch([currentPage, scale], () => {
  renderPage(currentPage.value);
});

onMounted(() => {
  loadPdf();
});
</script>

4.3 样式样例

<style scoped>
.pdf-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pdf-controls {
  margin-bottom: 1rem;
}
canvas {
  border: 1px solid #ddd;
}
</style>

---

五、目录大纲支持（可选拓展）

你可以通过 getOutline() 获取 PDF 的目录并展示：

const outline = await pdfDoc.value.getOutline();

outline.forEach(item => {
  console.log('章节标题：', item.title);
});

你可以进一步将其渲染为嵌套列表，实现目录跳转功能。

---

六、组件使用方式

在页面中使用组件：

<template>
  <PdfViewer pdfUrl="/test.pdf" />
</template>

<script setup>
import PdfViewer from '@/components/PdfViewer.vue';
</script>

---

七、常见问题与优化建议

7.1 跨域问题

远程 PDF 地址若跨域未配置，需服务端支持 CORS 或改为本地代理加载。

7.2 大文件性能优化

• 延迟加载页码（分页懒加载）
• 限制初始渲染页
• 使用虚拟滚动加载多页内容

---

八、总结

通过整合 Vue 3 与 PDF.js，我们实现了一个功能完备、用户体验良好的在线 PDF 阅读器。它具备高度的可扩展性，你可以根据业务继续扩展目录跳转、批注、签名、下载等功能，打造属于你的文档系统。

---

到这里，这篇文章就和大家说再见啦！我的主页里还藏着很多 篇 前端 实战干货，感兴趣的话可以点击头像看看，说不定能找到你需要的解决方案～
创作这篇内容花了很多的功夫。如果它帮你解决了问题，或者带来了启发，欢迎：
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒：
转载请注明原文链接，商业合作请私信联系
感谢你的阅读！我们下篇文章再见～ 💕