开源 · MIT · React & Vue

PDF 批注
一行命令开始

Name: InkLayer
Author: InkLayer

不再手算 PDF.js 坐标 · 缩放 300% 不漂移 · 14 种批注开箱即用 · 批注一键导出 PDF/Excel

快速开始

inklayer.dev/demo

PDF 加载中… / Loading PDF…

核心能力

从批注模型到导出系统，覆盖 PDF 批注全链路

统一批注模型

提供一致的 PDF 批注数据模型，覆盖文本、高亮、手写绘制、图形与印章等类型，便于跨端与持久化处理。统一数据模型，持久化与回显一致，不再为跨端兼容烦恼。

文本标注高亮手写图形印章 +9 更多

高保真渲染层

基于 PDF.js 构建渲染适配层，缩放 300% 仍精准对齐，批注位置永不漂移。

编辑与持久化

支持批注的创建、修改、删除与加载恢复，保证数据在不同渲染周期中的一致性。

导出能力

支持将批注数据导出为 PDF 或 Excel，用于第三方系统对接。批注评审结果一键导出，直接嵌入现有工作流。

PDF

Excel

双框架支持

同时支持 React 18+ 与 Vue 3+，提供一致的 API 设计与使用体验。

可自定义 UI

工具栏、侧边栏与操作区域均可完全替换，支持插槽或 Render Props 方式进行深度定制。

slots render props toolbar sidebar

一行命令，开始使用

选择你的框架，复制即用

$ npm install inklayer-vue

import { PdfAnnotator, PdfViewer } from 'inklayer-vue'
import 'inklayer-vue/style'

<template>
  <PdfAnnotator
    url="/sample.pdf"
    :user="{ id: 'user-1', name: 'Demo User' }"
  />
</template>import { PdfAnnotator, PdfViewer } from 'inklayer-react'
import 'inklayer-react/style'

export default function App() {
  return (
    <PdfAnnotator
      url="/sample.pdf"
      user={{ id: 'user-1', name: 'Demo User' }}
    />
  )
}

适用场景

任何需要 PDF 查看、批注与协作的系统构建场景

文档审阅系统

合同审核、报告批阅，支持多人批注与评论协作

在线教育平台

教师在课件 PDF 上做批注，学生实时查看与互动

医疗报告标注

医生在 PDF 报告上标注重点区域，支持高亮与图形批注

工程图纸管理

CAD 导出 PDF 后的审图、标注与批注管理工作流

法律文书处理

律师在合同 PDF 上标记关键条款，支持文本高亮与评论

PDF 批注 一行命令开始