Skip to content

README.md

Latest commit

 

History

History
159 lines (112 loc) · 3.84 KB

README.md

File metadata and controls

159 lines (112 loc) · 3.84 KB
Raw

InkLayer

InkLayer React

简体中文   |   English

🖊️ 基于 PDF.js 构建的 React PDF 查看与批注 SDK
用于快速构建文档审阅、批注与评论系统


InkLayer React Screenshot

⭐ 快速开始（推荐）

最快体验 InkLayer React 的方式：直接使用 官方 Starter 🚀 

git clone https://github.com/Laomai-codefee/inklayer-react-starter.git
cd inklayer-react-starter
npm install
npm run dev

打开：

http://localhost:5173

💡 Starter 已内置完整 PDF 批注能力示例，无需额外配置即可体验 SDK 全功能。

✨ 特性

  • 🚀 PDF 查看器（缩放 / 搜索 / 主题）
  • 🖍️ PDF 批注系统（高亮 / 笔迹 / 图形 / 印章 / 签名）
  • 💬 评论与审阅流程
  • 💾 批注数据模型（可持久化）
  • 📤 导出能力（PDF / Excel）
  • 🎨 可自定义 UI（工具栏 / 侧边栏）

📦 安装

npm install inklayer-react

🚀 基础用法

PdfAnnotator（批注）

import { PdfAnnotator } from 'inklayer-react'
import 'inklayer-react/style'

export default function App() {
  return (
    <PdfAnnotator
      title="PDF Annotator"
      url="https://example.com/sample.pdf"
      user={{ id: 'u1', name: 'Alice' }}
      onSave={(annotations) => {
        console.log('Saved annotations:', annotations)
      }}
    />
  )
}

PdfViewer（查看器）

import { PdfViewer } from 'inklayer-react'
import 'inklayer-react/style'

export default function App() {
  return (
    <PdfViewer
      title="PDF Viewer"
      url="https://example.com/sample.pdf"
      layoutStyle={{ width: '100vw', height: '100vh' }}
    />
  )
}

📖 API 文档

👉 https://inklayer.dev/docs/react

🔗 相关项目

💬 反馈

有问题？想提建议？欢迎来 GitHub Discussions 聊聊，或者直接发邮件：codefee@foxmail.com

Bug 报告请走 GitHub Issues

🌐 运行环境

InkLayer React 仅支持浏览器环境，不支持服务端渲染（SSR）。组件依赖 DOM、Canvas 和 Web Worker，请只在客户端代码中导入和渲染。

  • 支持 React 18 和 React 19
  • 支持 Vite 和 Webpack 5
  • 同时提供 ESM 和 CommonJS 入口，推荐优先使用 ESM
  • 在 Next.js、Remix 等同构框架中使用时，需要将组件放在客户端边界内，并关闭该组件的 SSR

📄 License

MIT © InkLayer