image-pdf-preview

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

Installation

npm install image-pdf-preview

Usage

Global Registration

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

Vue.use(ImagePdfPreview)

Component Registration

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

<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 可以调用组件的方法：

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

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

TypeScript Support

本组件已包含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支持
• 🔌 插件化安装