快速开始
安装
Vue 3（npm）
bash
npm i @mineru-viewer/vue
# 运行依赖（peer）：vue ^3.3
# 打包依赖（dependencies，由你的打包器解析）：pdfjs-dist / jszip / markedvue
<script setup>
import { ref } from "vue";
import { MineruViewer } from "@mineru-viewer/vue";
import "@mineru-viewer/vue/style.css";
const zip = ref("/sample.zip"); // File | ArrayBuffer | url 字符串
</script>
<template>
<MineruViewer :zip="zip" />
</template>React（npm）
bash
npm i @mineru-viewer/react
# peer：react / react-dom >=17jsx
import { useRef } from "react";
import { MineruViewer } from "@mineru-viewer/react";
import "@mineru-viewer/react/style.css";
export default function App() {
const ref = useRef(null);
return <MineruViewer ref={ref} zip="/sample.zip" />;
}免构建（无打包器 / CDN）
免构建包已发布到 npm，可直接通过 jsDelivr 引入，无需打包器、也无需
npm install。 Vue 暴露全局MV，React 暴露全局MVReact，需同时引入对应 vendor 脚本（vue/react、pdf.js、jszip、marked）。
Vue 版
html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mineru-viewer/vue-no-esm/dist/mineru-viewer.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@4.4.0/build/pdf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked@12.0.0/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mineru-viewer/vue-no-esm/dist/mineru-viewer.js"></script>
<script>
// 关键：手动指定 pdf.js worker（免构建场景无法自动解析 ?url worker）
MV.setPdfWorkerSrc("https://cdn.jsdelivr.net/npm/pdfjs-dist@4.4.0/build/pdf.worker.min.mjs");
const viewer = MV.mount("#app", { zip: "/sample.zip" });
// viewer.setHighlights(...) / viewer.focusBlock(...)
</script>React 版
html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mineru-viewer/react-no-esm/dist/mineru-viewer.css" />
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@4.4.0/build/pdf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked@12.0.0/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mineru-viewer/react-no-esm/dist/mineru-viewer.js"></script>
<script>
MVReact.setPdfWorkerSrc("https://cdn.jsdelivr.net/npm/pdfjs-dist@4.4.0/build/pdf.worker.min.mjs");
MVReact.mount("#app", { zip: "/sample.zip" });
</script>PDF worker
免构建（*-no-esm）形态必须调用 setPdfWorkerSrc(...) 指定 worker。 npm 形态在 Vite 等打包器中会自动解析 pdfjs-dist/build/pdf.worker.min.mjs?url，无需手动设置； 但如果你在特殊打包环境遇到 worker 报错，同样可显式调用 setPdfWorkerSrc。
想自托管？
如果不想依赖公共 CDN，把 dist/mineru-viewer.js 与 dist/mineru-viewer.css 复制到你的站点（如 /packages/ 下），把上面的 jsDelivr 地址换成本站地址即可。
拿到一个 zip 产物
如果没有现成的 MinerU 产物，先用 MinerU 解析一份 PDF：
bash
# 参考 MinerU 官方：https://github.com/opendatalab/MinerU
mineru -p input.pdf -o ./output --source pdf
# output/ 下会得到 full.md + 源文件 + layout/middle.json，打包成 zip 即可仓库 demo/sample.zip 已包含一个可直接试用的示例产物。
第一个高亮
ts
// Vue：通过 ref 调用命令式 API
viewerRef.value.addHighlight({
id: "demo",
blockIds: ["b-1", "b-2"],
color: "#ffd666",
label: "示例高亮"
});
// React：
ref.current.addHighlight({ id: "demo", blockIds: ["b-1"], color: "#ff7875" });监听事件
两种形态都通过 bus（全局轻量事件总线）暴露事件，Vue 还额外支持组件 emits：
ts
import { bus } from "@mineru-viewer/vue"; // 或 @mineru-viewer/react
bus.on("ready", ({ meta, pages }) => console.log("解析完成", meta, pages.length, "页"));
bus.on("block-click", ({ blockId, page }) => console.log("点中源块", blockId, "页", page));
bus.on("highlight-activate", ({ group }) => console.log("高亮组被点击", group));
bus.on("error", ({ phase, message }) => console.error(phase, message));