116 lines
3.9 KiB
Markdown
116 lines
3.9 KiB
Markdown
|
根据你的需求（PDF 内容精确引用到思维导图节点，且支持双向跳转），结合项目技术栈（Next.js + TypeScript），推荐以下 PDF 组件方案：
|
|||
|
|
|
|||
|
|
### 推荐组件：`@react-pdf-viewer/core`（搭配 `@react-pdf-viewer/selection-mode` 插件）
|
|||
|
|
|
|||
|
|
#### 核心优势：
|
|||
|
|
1. **精确内容选取**：支持页面级、文本片段级选择，可获取选中内容的页码、坐标、文本内容
|
|||
|
|
2. **双向链接能力**：可生成带定位信息的锚点（如 `#page=3&selection=xxx`），实现思维导图点击跳转
|
|||
|
|
3. **React 生态适配**：完美兼容 Next.js 15 和 TypeScript，支持 SSR/SSG
|
|||
|
|
4. **轻量可扩展**：核心包体积小，按需加载插件（如文本选择、搜索、缩放）
|
|||
|
|
|
|||
|
|
#### 实现思路：
|
|||
|
|
|
|||
|
|
1. **PDF 查看器集成**
|
|||
|
|
```tsx
|
|||
|
|
// components/PDFViewer.tsx
|
|||
|
|
import { Viewer, Worker } from '@react-pdf-viewer/core';
|
|||
|
|
import { selectionModePlugin } from '@react-pdf-viewer/selection-mode';
|
|||
|
|
import '@react-pdf-viewer/core/lib/styles/index.css';
|
|||
|
|
import '@react-pdf-viewer/selection-mode/lib/styles/index.css';
|
|||
|
|
|
|||
|
|
const selectionMode = selectionModePlugin();
|
|||
|
|
const { SelectionMode } = selectionMode;
|
|||
|
|
|
|||
|
|
interface PDFViewerProps {
|
|||
|
|
fileUrl: string;
|
|||
|
|
onSelect: (data: {
|
|||
|
|
text: string;
|
|||
|
|
pageNumber: number;
|
|||
|
|
position: { x: number; y: number };
|
|||
|
|
}) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function PDFViewer({ fileUrl, onSelect }: PDFViewerProps) {
|
|||
|
|
return (
|
|||
|
|
<Worker workerUrl="https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.worker.min.js">
|
|||
|
|
<SelectionMode
|
|||
|
|
onSelect={(args) => {
|
|||
|
|
if (args.selectionText) {
|
|||
|
|
onSelect({
|
|||
|
|
text: args.selectionText,
|
|||
|
|
pageNumber: args.pageIndex + 1, // 页码从1开始
|
|||
|
|
position: args.selectionRects[0]?.position || { x: 0, y: 0 },
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Viewer fileUrl={fileUrl} plugins={[selectionMode]} />
|
|||
|
|
</SelectionMode>
|
|||
|
|
</Worker>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
2. **思维导图节点与 PDF 引用绑定**
|
|||
|
|
```tsx
|
|||
|
|
// 思维导图节点数据结构扩展
|
|||
|
|
interface MindMapNode {
|
|||
|
|
id: string;
|
|||
|
|
text: string;
|
|||
|
|
pdfReference?: {
|
|||
|
|
fileId: string; // 关联的PDF文件ID
|
|||
|
|
pageNumber: number;
|
|||
|
|
text: string; // 引用的文本内容
|
|||
|
|
position?: { x: number; y: number }; // 可选：更精确的定位
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 点击节点跳转PDF
|
|||
|
|
const handleNodeClick = (node: MindMapNode) => {
|
|||
|
|
if (node.pdfReference) {
|
|||
|
|
// 导航到PDF查看页并定位
|
|||
|
|
router.push(`/documents/${node.pdfReference.fileId}?page=${node.pdfReference.pageNumber}`);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
3. **PDF 选择内容插入思维导图**
|
|||
|
|
```tsx
|
|||
|
|
// 在PDF查看页中使用
|
|||
|
|
const PDFDocumentPage = ({ params }) => {
|
|||
|
|
const [mindMapNodes, setMindMapNodes] = useState<MindMapNode[]>([]);
|
|||
|
|
|
|||
|
|
const handlePDFSelect = (data) => {
|
|||
|
|
// 创建新节点并关联PDF引用
|
|||
|
|
const newNode: MindMapNode = {
|
|||
|
|
id: uuidv4(),
|
|||
|
|
text: data.text.substring(0, 50) + '...', // 截断显示
|
|||
|
|
pdfReference: {
|
|||
|
|
fileId: params.id,
|
|||
|
|
pageNumber: data.pageNumber,
|
|||
|
|
text: data.text,
|
|||
|
|
position: data.position,
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
setMindMapNodes([...mindMapNodes, newNode]);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return <PDFViewer fileUrl={pdfUrl} onSelect={handlePDFSelect} />;
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
4. **双向跳转优化**
|
|||
|
|
- 在 PDF 查看页加载时，通过 URL 参数自动定位到指定页：
|
|||
|
|
```tsx
|
|||
|
|
const { page } = useSearchParams();
|
|||
|
|
const defaultPage = page ? parseInt(page.toString()) : 1;
|
|||
|
|
// 传递defaultPage给Viewer组件
|
|||
|
|
```
|
|||
|
|
- 思维导图节点显示引用标识（如 📄3 表示引用第3页），增强可视化关联
|
|||
|
|
|
|||
|
|
### 备选方案：
|
|||
|
|
如果需要更强大的 PDF 处理能力（如 MinerU 提取后的结构化内容引用），可结合：
|
|||
|
|
- **后端**：MinerU 提取 PDF 时记录「文本块-页码」映射关系
|
|||
|
|
- **前端**：通过 `@react-pdf-viewer` 定位到 MinerU 识别的文本块位置
|
|||
|
|
|
|||
|
|
该方案完全符合项目前后端分离架构，且能无缝集成到现有的思维导图（simple-mind-map）和文档系统中。
|