API 参考 · Vue

包名：@mineru-viewer/vue（同时发布 @mineru-viewer/vue-no-esm 免构建全局版，全局变量 MV）。

导出

import {
  MineruViewer,   // 门面组件
  SourcePane,     // 右栏 PDF/图片源面板（一般不需单独用）
  MarkdownPane,   // 左栏 Markdown 面板（一般不需单独用）
  mount,          // 命令式挂载：mount(el, props) -> 实例
  bus,            // 全局事件总线
  setPdfWorkerSrc,// 指定 pdf.js worker
  loadZipEntries, // 低阶：zip -> entries
  getAdapter,     // 低阶：选择版本适配器
  detectMeta,     // 低阶：探测 zip 的 MinerU 版本
  adapters,       // 低阶：已注册适配器表
  version         // 当前版本字符串
} from "@mineru-viewer/vue";
import "@mineru-viewer/vue/style.css";

Props

名称	类型	默认值	说明
zip	File | ArrayBuffer | string	—	要渲染的 MinerU 产物；string 视为 url 会 fetch
version	string	""	手动指定 MinerU 版本（如 "v340"），否则自动探测
highlights	HighlightGroup[]	[]	业务注入高亮组（见下）
showMarkdown	boolean	true	是否展示左栏 Markdown 预览
initialPage	number	1	初始页码
theme	'light' | 'dark'	'light'	主题

Emits（事件）

事件	payload	说明
ready	{ meta, pages }	解析完成
block-click	{ blockId, page }	点击了右侧源块
block-select	{ blockIds, page }	点击了左侧 Markdown 块
copy	{ blockIds, text }	复制块内容
star	{ blockIds, starred }	收藏块
feedback	{ blockIds, text }	反馈
edit	{ blockIds, page, oldText, newText }	编辑块文本
highlight-activate	{ group }	用户点击了某个高亮组
error	{ phase, message }	出错（phase 如 "load"）

所有事件同时通过 bus 广播（Vue 3 已移除实例 $on），无框架侧也能监听。

命令式 API（<script setup> 中通过 ref）

<script setup>
import { ref } from "vue";
import { MineruViewer } from "@mineru-viewer/vue";
const v = ref(null);
v.value.setHighlights([{ id: "g1", blockIds: ["b-1"], color: "#ffd666" }]);
v.value.addHighlight({ id: "g2", blockIds: ["b-2"] });
v.value.clearHighlights();
v.value.focusBlock("b-3");
v.value.loadZip(fileOrUrl);
</script>
<template><MineruViewer ref="v" :zip="'/sample.zip'" /></template>

方法	签名	说明
setHighlights	(groups: HighlightGroup[]) => void	互斥替换全部高亮，以最后一组为锚点滚动
addHighlight	(group: HighlightGroup) => void	追加/更新一组（按 id 去重），多组共存
clearHighlights	() => void	清空全部高亮
focusBlock	(blockId: string) => void	定位并居中到某块（含左栏联动）
loadZip	(input: File|ArrayBuffer|string) => Promise<void>	重新加载产物

HighlightGroup 结构

interface HighlightGroup {
  id?: string;        // 用于 addHighlight 去重 / 更新
  blockIds: string[]; // 命中的物理块 id（稳定句柄）
  color?: string;     // 高亮色，缺省取主题色
  label?: string;     // 浮层/缩略图展示文案
  meta?: any;         // 业务自定义数据
}

mount 命令式挂载

无需 Vue 工程也能用：

import { mount } from "@mineru-viewer/vue";
const inst = mount("#app", { zip: "/sample.zip" });
inst.setHighlights([{ id: "x", blockIds: ["b-1"] }]);
inst.focusBlock("b-1");

返回的 inst 提供与 ref 相同的命令式方法（setHighlights / addHighlight / clearHighlights / focusBlock / loadZip）。