@zys/pdf-reader

vue3 编写的 pdf 阅读器

安装

pnpm install @zys/pdf-reader

使用

<template>
    <div class='App abs-content'>
        <pdfReader :src="pdf"></pdfReader>
    </div>
</template>
<script setup lang="ts">
import "@zys/pdf-reader/style.css"
import pdfReader, { GlobalWorkerOptions } from "@zys/pdf-reader"
import workerUrl from "@zys/pdf-reader/pdf.worker.mjs?url"
import pdf from "./test1.pdf?url"
GlobalWorkerOptions.workerSrc = workerUrl
</script>
<style scoped lang="less">
.App {}
</style>

API

Props

| 属性名 | 类型 | 说明 | |---------------------|-----------------------|--------------------------------------| | src | string | pdf地址 | | vertical | boolean | 是否垂直模式 | | fixedOutline | boolean | 是否固定大纲 | | swiper | Swiper | SwiperJs | | swiperOptopns | SwiperJsOptions | SwiperJsOptions | | outline | any[] | 大纲 | | numPages | number | 总页数 | | currentPage | number | 当前页码 | | annotations | Record<string | number, string | | currentDrauu | Drauu | - | | currentDrauuOptopns | CurrentDrauuOptopns | - | | container | HTMLDivElement | - | | showOutline | boolean | 是否显示大纲 | | isShowThumbnailList | boolean | 是否显示缩略图 | | isOpenDrauu | boolean | 是否开启批注 | | pdf | PDFDocumentProxy | pdf文档代理或实例 | | thumbnailLists | any[] | 缩略图列表 | | getThumbnailLists | ()=>any | 获取缩略图列表。默认不执行，还未实现 | | prevPage | ()=>void | 切换上一页 | | nextPage | ()=>void | 切换下一页 | | showTools | boolean | 是否显示地步操作工具页 |

Events

| 事件名 | 说明 | |--------|----------------------| | change | 当前页码生命周期回调 |

插槽

| 名称 | 类型或参数 | 说明 | |------|------------|------| | tool | - | - |

CurrentDrauuOptopns

| 属性名 | 类型 | 说明 | |--------|-------------------------------------------------------------------------|------| | mode | 'draw' 、 'stylus' 、 'line' 、 'rectangle' 、 'ellipse' 、 'eraseLine' | 模式 | | color | number | 颜色 | | size | number | 粗细 |

功能

| 功能 | 状态 | 说明 | |--------|------|------------------| | 缩放 | ✅ | - | | 翻页 | ✅ | - | | 横竖屏 | ✅ | - | | 缩略图 | ☑️ | 待完善，按需加载 | | 大纲 | ✅ | - | | 批注 | ✅ | - |

批注功能

| 功能 | 状态 | 说明 | |--------------|------|----------| | 清空 | ✅ | - | | 撤回 | ✅ | - | | 笔的粗细 | ✅ | - | | 笔的模式 | ✅ | - | | 是否开启批注 | ✅ | 默认开启 |

兼容性

• 支持 IE11+
• 支持移动端
• 向下兼容到 chrome 87+ （已校验， 其他版本自行校验）

资料

• pdf版本：pdfjs-dist(2.16.105)
• 批注功能依赖：drauu、github
• vueuse:13.0.0