Skip to content

在线示例

下面是两个免构建(no-esm)全局版的真实示例,点击下方卡片即可在新窗口中打开。所有依赖(pdf.js / jszip / marked / vue.global / react UMD)以及示例 sample.zip 都已打包进站点,离线可用

Vue 示例

Vue 3 全局版 在新窗口打开 →仓库 `vue/vue-no-esm/` 的真实产物。挂 `window.MV`,使用 `vue.global` + `pdf.js` + `jszip` + `marked`。/demo/vue/index.html · ~170 KB

React 示例

React 18 全局版 在新窗口打开 →仓库 `react/react-no-esm/` 的真实产物。挂 `window.MVReact`,使用 `react` + `react-dom` UMD + 同样的 pdf.js / jszip / marked 栈。/demo/react/index.html · ~130 KB

示例做了什么

  • 引入 vendor 脚本:vue.global / react + react-dom / pdf.js / jszip / marked
  • 引入全局构建 mineru-viewer.global.js(Vue 暴露 MV,React 暴露 MVReact
  • 调用 setPdfWorkerSrc 指定 pdf.js worker
  • 一个示例业务面板:点击按钮向查看器 addHighlight 一个高亮组,并 focusBlock 定位

打开示例页后按 F12 看控制台打印的 bus 事件,也可以在地址栏把 sample.zip 换成你自己的 MinerU 产物测试。

源码位置

示例源码
Vue 全局版vue/vue-no-esm/demo.html
React 全局版react/react-no-esm/demo.html
站点内嵌副本vitepress/public/demo/{vue,react}/index.html

站点内的 /demonpm run docs:build 时由 vitepress/public/ 原样拷贝进 dist 的,保证示例离线可用。

MinerU Viewer · 组件化文档溯源查看器 · 官网 · GitHub