image-pdf-preview/README.md

A Vue2 PDF preview component with zoom, navigation and thumbnail features.

# image-pdf-preview

A Vue2 PDF preview component with zoom, navigation and thumbnail features.

## Installation

```bash
npm install image-pdf-preview
```

## Usage

### Global Registration

```javascript
import Vue from 'vue'
import ImagePdfPreview from 'image-pdf-preview'
import 'image-pdf-preview/dist/image-pdf-preview.css'

Vue.use(ImagePdfPreview)
```

### Component Registration

```javascript
import Vue from 'vue'
import FilePreview from 'image-pdf-preview'
import 'image-pdf-preview/dist/image-pdf-preview.css'

Vue.component('FilePreview', FilePreview)
```

### Template Usage

```vue
<template>
  <FilePreview 
    title="预览文件"
    :app-id="1"
    :vid="84148"
    @prev-page="handlePrevPage"
    @next-page="handleNextPage"
    @page-change="handlePageChange"
  />
</template>

<script>
export default {
  methods: {
    handlePrevPage(currentPage) {
      console.log('上一页，当前页:', currentPage + 1)
    },
    handleNextPage(currentPage) {
      console.log('下一页，当前页:', currentPage + 1)
    },
    handlePageChange(pageIndex) {
      console.log('页面切换，当前页:', pageIndex + 1)
    }
  }
}
</script>
```

## Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| title | String | Yes | PDF文件标题 |
| appId | Number | Yes | 应用ID |
| vid | Number | Yes | 视频ID |

## Events

| Event | Parameters | Description |
|-------|------------|-------------|
| prev-page | currentPage | 上一页事件 |
| next-page | currentPage | 下一页事件 |
| page-change | pageIndex | 页面切换事件 |

## Methods

通过 `$refs` 可以调用组件的方法：

```javascript
// 获取组件引用
const filePreview = this.$refs.filePreview;

// 调用方法
filePreview.prevPage();        // 上一页
filePreview.nextPage();        // 下一页
filePreview.goToPage(2);       // 跳转到第3页
filePreview.getCurrentPage();  // 获取当前页
filePreview.getTotalPages();   // 获取总页数
```

## TypeScript Support

本组件已包含TypeScript类型定义，无需额外安装类型包。

```typescript
import FilePreview from 'image-pdf-preview';

// 组件会自动提供类型提示
const component: typeof FilePreview = FilePreview;
```

## Dependencies

- Vue 2.6.0+
- Element UI 2.15.0+

## Features

- 📄 PDF页面预览
- 🔍 缩放功能（放大/缩小）
- 📖 页面导航（上一页/下一页）
- 🖼️ 缩略图导航
- 📱 响应式设计
- 🎯 TypeScript支持
- 🔌 插件化安装