vue-pdf-interactor

一个用于交互式 PDF 查看的 Vue 3 组件库，支持 OCR 文本高亮和交互功能。

特性

• 📄 基于 vue-pdf-embed 的 PDF 查看器
• 🔍 OCR 文本识别和高亮显示
• 🎯 交互式文本块选择
• 🎨 可自定义的工具栏按钮
• 📦 支持 ES Module 格式
• 💪 完整的 TypeScript 支持

安装

# 使用 pnpm
pnpm add vue-pdf-interactor

# 使用 npm
npm install vue-pdf-interactor

# 使用 yarn
yarn add vue-pdf-interactor

依赖

该组件库依赖以下包，需要在使用时确保已安装：

• vue (^3.5.24)
• vue-pdf-embed (^2.1.3)
• @floating-ui/vue (^1.1.9)
• @vueuse/core (^14.1.0)

使用示例

<script setup lang="ts">
import { Interactor, ToolbarButton } from 'vue-pdf-interactor'
import type { OCRDocument } from 'vue-pdf-interactor'
import VuePdfEmbed from 'vue-pdf-embed'
// 导入样式文件
import 'vue-pdf-interactor/vue-pdf-interactor.css'
import 'vue-pdf-embed/dist/styles/annotationLayer.css'
import 'vue-pdf-embed/dist/styles/textLayer.css'

const pdfSource = 'https://example.com/document.pdf'
const ocrDocument: OCRDocument = {
  pages: [
    {
      pageNumber: 1,
      width: 1788,
      height: 2527,
      blocks: [
        // OCR 文本块数据
      ]
    }
  ]
}
</script>

<template>
  <VuePdfEmbed :source="pdfSource" annotation-layer text-layer>
    <template #after-page="{ page }">
      <Interactor :ocr-document="ocrDocument" :page="page">
        <template #toolbar="{ block }">
          <ToolbarButton label="操作" @click="() => handleAction(block)" />
        </template>
      </Interactor>
    </template>
  </VuePdfEmbed>
</template>

开发

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 类型检查
pnpm type-check

# 构建库
pnpm build

# 预览构建结果
pnpm preview

构建

构建命令会生成以下文件：

• dist/index.js - ES Module 格式（现代化模块）
• dist/index.d.ts - TypeScript 类型定义
• dist/vue-pdf-interactor.css - 样式文件

版本管理

版本升级

# 补丁版本 (1.0.0 -> 1.0.1)
pnpm version:patch

# 次版本 (1.0.0 -> 1.1.0)
pnpm version:minor

# 主版本 (1.0.0 -> 2.0.0)
pnpm version:major

发布到 npm

# 发布前先测试（不会真正发布）
pnpm publish:dry-run

# 发布正式版本（自动升级版本并发布）
pnpm release:patch   # 补丁版本发布
pnpm release:minor   # 次版本发布
pnpm release:major   # 主版本发布

注意：

• 发布前会自动执行 prepublishOnly 钩子（构建和类型检查）
• 确保已登录 npm：npm login 或 pnpm login
• 确保包名在 npm 上可用且未被占用
• 发布前确保 git 工作区干净（已提交所有更改）
• 如需跳过 git 检查，可在命令后添加 --no-git-checks 参数（不推荐）

许可证

MIT