# pdfjs分片加载的前后端实现

**Repository Path**: zhouquanstudy/pdfjs

## Basic Information

- **Project Name**: pdfjs分片加载的前后端实现
- **Description**: 主要基于PDF.js 分片加载的应用展开，完整介绍了前端嵌入方式、后端分片返回实现及多项优化措施。前端通过集成官方viewer.mjs，配合 Vue 组件化封装，实现了在线预览效果；
后端基于 Spring Boot 提供 Range 请求支持，使大文件按需加载，提升速度与交互体验。在此基础上，禁用预加载、提升可见阈值、滚动防抖和 Ehcache 缓存等手段进一步优化性能，减少带宽与服务器压力

- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-02
- **Last Updated**: 2025-09-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3

## README

# Vue3 PDF.js 查看器

一个基于 Vue 3 和 PDF.js 的 PDF 文档在线查看器，支持在浏览器中直接预览和操作 PDF 文件。

## 实现效果

![录制_2025_09_01_16_27_12_559](https://gitee.com/zhouquanstudy/typora_pic/raw/master/img/录制_2025_09_01_16_27_12_559.gif)

## 项目功能

- **PDF 在线预览**：支持在浏览器中直接查看 PDF 文档
- **按需加载**：支持 PDF 文档分片加载，提升大文件加载性能

## 技术栈

### 后端框架

基于java 8的springboot项目，可直接运行

### 前端框架

- **Vue.js**: `3.2.13` - 渐进式 JavaScript 框架
- **node.js**: 使用`14.14.0`或`20.12.0`都可以，其他版本可以尝试

### PDF 处理

- **PDF.js**: `2.4.456` - Mozilla 开源的 JavaScript PDF 渲染库
- 支持 PDF 文档解析、渲染和交互功能
- 内置 PDF.js Web Viewer 完整界面

## 项目安装

```bash
npm install
```

## 开发运行

```bash
npm run serve
```

## 使用说明

### PDF 加载配置

项目通过 iframe 嵌入 PDF.js viewer，PDF 文件通过后台接口获取：

```javascript
// 默认配置的 PDF 加载接口
this.src = `http://localhost:8181/v1/pdf/load`;
```

### 加载模式配置

在 `public/static/pdf/web/viewer.js` 中可以配置加载模式：

- **一次性加载**: `disableAutoFetch = false`
- **按需加载**: `disableAutoFetch = true` 和 `disableStream = true`

### 后台要求

后台接口必须返回文件流格式的 PDF 数据

## 项目结构

```
src/
├── App.vue          # 主应用组件，包含 PDF 查看器
├── main.js          # Vue 应用入口文件
├── router/          # 路由配置
└── assets/          # 静态资源

public/
└── static/
    └── pdf/         # PDF.js 完整库文件
        ├── build/   # PDF.js 核心文件
        └── web/     # PDF.js Web Viewer
```

## 开发说明

- Vue 3 项目中，PDF.js 文件必须放在 `public` 文件夹下
- 引用路径不需要包含 `public`，直接使用 `/static/...`
- 支持自定义 PDF 查看器界面和功能扩展