# pdfjs-viewer

**Repository Path**: micweb_admin/pdfjs-viewer

## Basic Information

- **Project Name**: pdfjs-viewer
- **Description**: pdf 文件预览
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-12-23
- **Last Updated**: 2025-12-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 PDF.js Viewer

一个基于Vue3和PDF.js的功能丰富的PDF查看器组件，支持缩略图导航、主题定制、按钮控制等功能。

![NPM Version](https://img.shields.io/npm/v/vue3-pdfjs-viewer)
![Vue 3](https://img.shields.io/badge/vue-3.x-brightgreen.svg)
![License](https://img.shields.io/npm/l/vue3-pdfjs-viewer)

## ✨ 特性

- 🖼️ **缩略图导航** - 左侧缩略图面板，快速跳转页面
- 🔍 **缩放控制** - 支持放大缩小，适应不同屏幕
- 🎨 **主题定制** - 完全可定制的颜色主题
- 🔘 **按钮控制** - 可控制各功能按钮的显示/隐藏
- 📱 **响应式设计** - 适配各种屏幕尺寸
- ⚡ **虚拟滚动** - 大文件性能优化
- 🛡️ **错误处理** - 优雅的错误提示和重试机制
- 🔧 **TypeScript支持** - 完整的类型定义

## 📦 安装

```bash
# 使用 npm
npm install vue3-pdfjs-viewer

# 使用 yarn
yarn add vue3-pdfjs-viewer

# 使用 pnpm
pnpm add vue3-pdfjs-viewer
```

## 🚀 快速开始

### 全局注册

```javascript
// main.js
import { createApp } from 'vue'
import Vue3PdfjsViewer from 'vue3-pdfjs-viewer'
import App from './App.vue'

const app = createApp(App)
app.use(Vue3PdfjsViewer)
app.mount('#app')
```

### 组件内使用

```vue
<template>
  <div>
    <PdfWithThumbnails :src="pdfUrl" />
  </div>
</template>

<script setup>
import { PdfWithThumbnails } from 'vue3-pdfjs-viewer'

const pdfUrl = '/path/to/your/document.pdf'
</script>
```

## 📖 详细用法

### 基础用法

```vue
<template>
  <PdfWithThumbnails
    :src="pdfUrl"
    :show-download-btn="true"
    :show-print-btn="true"
    :show-fullscreen-btn="true"
  />
</template>

<script setup>
import { PdfWithThumbnails } from 'vue3-pdfjs-viewer'

const pdfUrl = 'https://example.com/document.pdf'
</script>
```

### 自定义主题

```vue
<template>
  <PdfWithThumbnails
    :src="pdfUrl"
    toolbar-background-color="#1976d2"
    toolbar-text-color="#ffffff"
    content-background-color="#e3f2fd"
    primary-color="#ff5722"
  />
</template>
```

### 使用预设主题

```vue
<template>
  <PdfWithThumbnails
    :src="pdfUrl"
    v-bind="currentTheme"
  />
</template>

<script setup>
import { PdfWithThumbnails, themes } from 'vue3-pdfjs-viewer'
import { ref } from 'vue'

const pdfUrl = '/document.pdf'
const currentTheme = ref(themes.dark) // 使用深色主题
</script>
```

### 完全自定义配置

```vue
<template>
  <PdfWithThumbnails
    :src="pdfUrl"
    :show-download-btn="config.showDownload"
    :show-print-btn="config.showPrint"
    :show-fullscreen-btn="config.showFullscreen"
    :show-retry-btn="config.showRetry"
    :toolbar-background-color="theme.toolbarBg"
    :toolbar-text-color="theme.toolbarText"
    :content-background-color="theme.contentBg"
    :thumbnail-background-color="theme.thumbnailBg"
    :primary-color="theme.primary"
    :button-hover-color="theme.buttonHover"
  />
</template>

<script setup>
import { PdfWithThumbnails } from 'vue3-pdfjs-viewer'
import { reactive } from 'vue'

const pdfUrl = '/document.pdf'

const config = reactive({
  showDownload: true,
  showPrint: false,
  showFullscreen: true,
  showRetry: true
})

const theme = reactive({
  toolbarBg: '#2c3e50',
  toolbarText: '#ecf0f1',
  contentBg: '#34495e',
  thumbnailBg: '#2c3e50',
  primary: '#3498db',
  buttonHover: '#34495e'
})
</script>
```

## 🔧 API 参考

### PdfWithThumbnails Props

| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| `src` | `String` | `''` | PDF文件路径 |
| `showDownloadBtn` | `Boolean` | `true` | 是否显示下载按钮 |
| `showPrintBtn` | `Boolean` | `true` | 是否显示打印按钮 |
| `showFullscreenBtn` | `Boolean` | `true` | 是否显示全屏按钮 |
| `showRetryBtn` | `Boolean` | `true` | 是否显示重试按钮 |
| `toolbarBackgroundColor` | `String` | `'#333'` | 工具栏背景色 |
| `toolbarTextColor` | `String` | `'#fff'` | 工具栏文字颜色 |
| `contentBackgroundColor` | `String` | `'#222'` | 内容区域背景色 |
| `thumbnailBackgroundColor` | `String` | `'#232323'` | 缩略图区域背景色 |
| `thumbnailItemBackgroundColor` | `String` | `'#232323'` | 缩略图项背景色 |
| `primaryColor` | `String` | `'#42b983'` | 主题色 |
| `buttonHoverColor` | `String` | `'#444'` | 按钮悬停背景色 |

### 预设主题

```javascript
import { themes } from 'vue3-pdfjs-viewer'

// 可用主题
themes.default  // 默认主题
themes.dark     // 深色主题
themes.light    // 浅色主题
themes.blue     // 蓝色主题
```

### 工具函数

```javascript
import { configurePdfWorker } from 'vue3-pdfjs-viewer'

// 自定义PDF.js Worker路径
configurePdfWorker('/path/to/pdf.worker.js')

// 或使用CDN
configurePdfWorker('https://unpkg.com/pdfjs-dist@3.11.174/build/pdf.worker.min.js')
```

## 🎯 错误处理

组件会自动处理以下错误情况：

- ❌ **空PDF路径** - 显示友好提示
- ❌ **文件未找到** - 自动检测并提示
- ❌ **无效PDF格式** - 格式验证提示
- ❌ **网络错误** - 网络问题提示
- ❌ **密码保护** - 密码文件提示
- 🔄 **重试机制** - 提供重新加载功能

## 📱 移动端支持

组件完全支持移动端使用：

- 触摸滚动
- 手势缩放
- 响应式布局
- 移动端优化的UI

## 🛠️ 开发

```bash
# 克隆仓库
git clone https://gitee.com/ln471399281/pdfjs-viewer.git

# 安装依赖
cd vue3-pdfjs-viewer
pnpm install

# 开发模式
pnpm run dev

# 构建库
pnpm run build:lib

# 构建示例
pnpm run build
```

## 📝 更新日志

### v1.0.0

- 🎉 初始版本发布
- ✨ 支持缩略图导航
- ✨ 支持主题定制
- ✨ 支持按钮控制
- ✨ 支持错误处理
- ✨ 支持TypeScript

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开 Pull Request

## 📄 许可证

[MIT](./LICENSE) License © 2024 [Ning,Li](https://github.com/your-username)

## 🙏 致谢

- [PDF.js](https://github.com/mozilla/pdf.js) - Mozilla的PDF渲染引擎
- [Vue.js](https://github.com/vuejs/vue) - 渐进式JavaScript框架
- [Vite](https://github.com/vitejs/vite) - 下一代前端构建工具

---

如果这个项目对你有帮助，请给一个 ⭐️ Star ⭐️ 支持一下！