$3

---


---

English | 中文

---

Mobile PDF Viewer (English)

A mobile-friendly PDF viewer component for Vue 3, with support for touch gestures, zooming, and panning.

Features

- ✅ Touch gesture support (one-finger drag, two-finger pinch-to-zoom)
- ✅ Double-tap to zoom
- ✅ Optimized with virtual scrolling for on-demand page rendering
- ✅ Progress bar for loading status
- ✅ Boundary detection to prevent over-scrolling
- ✅ High-performance rendering using IntersectionObserver
- ✅ TypeScript support
- ✅ Modular design for easy maintenance

Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| source | PDFSourceDataOption | undefined | The source of the PDF file. This can be a URL to a PDF file, a Uint8Array, or any other parameter supported by pdf.js's getDocument. This prop is optional, and you can also load a PDF using the loadPDF method after the component is mounted. |
| config | MobilePDFViewerConfig | {} | Configuration options for the viewer. See the Configuration Options section below for more details. |
| containerClass | string | '' | Custom CSS class to apply to the root container element of the component. |
| canvasClass | string | '' | Custom CSS class to apply to each canvas element that renders a PDF page. |

Usage

$3

``vue



`

> Tip: If you do not provide the source in the props, you can also manually load a PDF file using the loadPDF method after the component is mounted:
> `javascript
> onMounted(() => {
> pdfViewerRef.value?.loadPDF('/path/to/your/pdf/file.pdf');
> })
> `

$3

`typescript
interface MobilePDFViewerConfig {
resolutionMultiplier?: number; // Resolution multiplier, default: 3
minScale?: number; // Minimum scale, default: 1
maxScale?: number; // Maximum scale, default: 4
dampingFactor?: number; // Damping factor for inertial scrolling, default: 0.95
boundaryPadding?: number; // Boundary padding to constrain dragging, default: 50
pinchSensitivity?: number; // Sensitivity for pinch-to-zoom, default: 0.6
}
`

$3

- load-start: PDF loading has started.
- load-progress: PDF loading is in progress (progress: number).
- load-complete: PDF has finished loading (pageCount: number).
- load-error: An error occurred while loading the PDF (error: Error).
- scale-change: The scale has changed (scale: number).

$3

`typescript
import { ref } from 'vue';

const pdfViewerRef = ref();

// Load a PDF
pdfViewerRef.value?.loadPDF(source);

// Reset the position
pdfViewerRef.value?.resetPosition();

// Get the current scale
const scale = pdfViewerRef.value?.getScale();

// Check if it is currently loading
const loading = pdfViewerRef.value?.isLoading();

// Get the number of pages
const pageCount = pdfViewerRef.value?.getPageCount();
`

---

Mobile PDF Viewer (中文)

一个基于 Vue 3 的移动端 PDF 查看器组件，支持触摸手势、缩放、平移等功能。

功能特性

- ✅ 支持触摸手势（单指拖拽、双指缩放）
- ✅ 支持双击缩放
- ✅ 虚拟滚动优化，按需渲染页面
- ✅ 进度条显示加载状态
- ✅ 边界限制，防止过度拖拽
- ✅ 高性能渲染，使用 IntersectionObserver
- ✅ TypeScript 支持
- ✅ 模块化设计，易于维护

Props

| Prop | 类型 | 默认值 | 描述 |
| --- | --- | --- | --- |
| source | PDFSourceDataOption | undefined | PDF 文件来源。可以是 PDF 文件的 URL、Uint8Array，或 pdf.js's getDocument 支持的参数对象。此属性为可选，你也可以在组件挂载后通过 loadPDF 方法加载 PDF。 |
| config | MobilePDFViewerConfig | {} | 查看器的配置选项。详细信息请参阅下方的 配置选项 部分。 |
| containerClass | string | '' | 应用于组件根容器元素的自定义 CSS 类。 |
| canvasClass | string | '' | 应用于渲染 PDF 页面的每个 canvas 元素的自定义 CSS 类。 |

使用方法

$3

`vue



`

> 提示: 如果你没有在 props 中提供 source，你也可以在组件挂载后通过 loadPDF 方法手动加载 PDF 文件：
> `javascript
> onMounted(() => {
> pdfViewerRef.value?.loadPDF('/path/to/your/pdf/file.pdf');
> })
> `

$3

`typescript
interface MobilePDFViewerConfig {
resolutionMultiplier?: number; // 分辨率倍数，默认 3
minScale?: number; // 最小缩放比例，默认 1
maxScale?: number; // 最大缩放比例，默认 4
dampingFactor?: number; // 阻尼系数，默认 0.95
boundaryPadding?: number; // 边界填充，默认 50
pinchSensitivity?: number; // 捏合敏感度，默认 0.6
}
`

$3

- load-start: 开始加载 PDF
- load-progress: 加载进度更新 (progress: number)
- load-complete: 加载完成 (pageCount: number)
- load-error: 加载错误 (error: Error)
- scale-change: 缩放变化 (scale: number)

$3

`typescript
import { ref } from 'vue';

const pdfViewerRef = ref();

// 加载 PDF
pdfViewerRef.value?.loadPDF(source);

// 重置位置
pdfViewerRef.value?.resetPosition();

// 获取当前缩放比例
const scale = pdfViewerRef.value?.getScale();

// 获取是否正在加载
const loading = pdfViewerRef.value?.isLoading();

// 获取页面数量
const pageCount = pdfViewerRef.value?.getPageCount();
``