AiPdfViewer

AiPdfViewer 是基于 PDF.js 官方 PDFViewer 生态的新 PDF 预览组件。它和现有 AiPdfPreview、AiFilePreview 完全并行，首版聚焦官方浏览、缩放、搜索、缩略图和全屏能力。

PDF 能力依赖 pdfjs-dist，推荐安装 5.x：

npm install pdfjs-dist

基础用法

<script setup lang="ts">
import { AiPdfViewer } from '@zhiyongui/lingxi-ui/ai-pdf-viewer'
import '@zhiyongui/lingxi-ui/ai-pdf-viewer/style.css'
</script>

<template>
  <AiPdfViewer
    src="/files/PDF.js%20%E5%AE%8C%E6%95%B4%E4%B8%AD%E6%96%87%E4%BD%BF%E7%94%A8%E6%89%8B%E5%86%8C.pdf"
    :height="680"
    show-thumbnails
  />
</template>

示例

Props

属性	类型	默认值	说明
src	string	必填	PDF 文件地址。
height	string | number	640	预览区域高度。
pdfScale	'page-width' | 'page-fit' | 'auto' | number	'page-width'	初始缩放。
pdfMinScale	number	0.25	数字缩放最小值。
pdfMaxScale	number	4	数字缩放最大值。
showToolbar	boolean	true	是否显示工具栏。
showSearch	boolean	true	是否显示内置搜索栏。
showThumbnails	boolean	false	是否显示缩略图侧栏。
enableTextLayer	boolean	true	是否启用 PDF.js 文本层。搜索依赖文本层。
labels	AiPdfViewerLabels	undefined	文案覆盖。

Events

事件	参数	说明
ready	-	PDF viewer 初始化完成。
error	unknown	加载或渲染异常。
loading-change	boolean	加载状态变化。
page-change	currentPage, pageCount	当前页变化。
scale-change	number | string	缩放变化。
search-change	AiPdfViewerSearchState	搜索状态变化。

Exposes

方法	参数	说明
scrollToPage(page)	number	滚动到指定页。
setScale(scale)	AiPdfViewerScaleMode	设置缩放。
zoomIn()	-	放大。
zoomOut()	-	缩小。
search(keyword, options?)	string, AiPdfViewerSearchOptions	全文搜索。
findNext()	-	下一条搜索命中。
findPrev()	-	上一条搜索命中。
clearSearch()	-	清空搜索。
toggleFullscreen()	-	切换全屏。
refresh()	-	重新加载 PDF。

说明

首版不包含业务 bbox 双向定位和标注编辑。需要实体定位、引用来源高亮或标注草稿能力时，继续使用 AiFilePreview / AiPdfPreview；后续会在 AiPdfViewer 上新增独立 overlay 层承载这些业务能力。