快速开始

本教程将指导你在 5 分钟内完成 InkLayer 的安装、加载 PDF，快速上手查看或批注。覆盖 React 和 Vue 两个框架，选择你熟悉的版本开始。

Starter（推荐）🚀

最快体验 InkLayer 的方式：直接使用官方 Starter 模板，无需手动配置即可体验 SDK 全功能。

React

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

Vue

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

💡 不想本地安装？直接在浏览器中体验：

• 在 StackBlitz 中打开 React 版本 →
• 在 StackBlitz 中打开 Vue 版本 →

打开 http://localhost:5173，即可看到一个功能完整的 PDF 批注器（也可替换为查看器组件）。顶部的工具栏包含高亮、画笔、矩形等 14 种批注工具，左侧是缩略图栏，右侧是批注列表。你可以立即点击任意批注工具，在 PDF 上绘制批注。

💡 Starter 已内置完整 PDF 查看与批注能力示例，无需额外配置。直接修改代码即可开始开发。

手动安装

如果你想在已有项目中集成 InkLayer，请按照以下步骤手动安装。

InkLayer 将所有底层依赖（PDF.js、Konva、pdf-lib 等）内置打包，你只需要安装对应框架的包：

React

npm install inklayer-react

Vue

npm install inklayer-vue

不需要（也不建议）手动安装 pdfjs-dist、konva、pdf-lib 等包，InkLayer 已内置经过测试的对应版本。

选择组件

InkLayer 提供两个顶层组件，在开始之前先确认你需要哪个：

下面的示例分别展示两个组件 — PdfViewer 用于查看，PdfAnnotator 用于完整批注。按需选用即可。

最简示例

导入组件和样式，传入 PDF 地址即可使用。

提示：以下示例使用一个可公开访问的测试 PDF。你也可以将自己的 PDF 文件放在项目的 public/ 目录下，然后引用对应路径（如 /my-file.pdf）。

React

PdfViewer — 只看文档

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

export default function App() {
  return (
    <PdfViewer
      url="https://inklayer.dev/inklayer-demo.pdf"
      layoutStyle={{ width: '100vw', height: '100vh' }}
    />
  )
}

PdfAnnotator — 完整批注

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

export default function App() {
  return (
    <PdfAnnotator
      url="https://inklayer.dev/inklayer-demo.pdf"
      user={{ id: 'user-1', name: 'Demo User' }}
      layoutStyle={{ width: '100vw', height: '100vh' }}
    />
  )
}

预期效果：PdfViewer 显示一个简洁的 PDF 阅读器，支持缩放、搜索与翻页；PdfAnnotator 显示完整批注器，工具栏包含高亮、画笔、矩形等 14 种批注工具，左侧缩略图栏，右侧批注列表，可立即点击工具在 PDF 上绘制批注。

Vue

⚠️ 必读：使用 inklayer-vue 前必须注册插件。在 main.ts 中调用 app.use(inklayerVuePlugin)：

import { createApp } from 'vue'
import { inklayerVuePlugin } from 'inklayer-vue'
import App from './App.vue'

const app = createApp(App)
app.use(inklayerVuePlugin)
app.mount('#app')

PdfViewer — 只看文档

<script setup>
import { PdfViewer } from 'inklayer-vue'
import 'inklayer-vue/style'
</script>

<template>
  <PdfViewer
    url="https://inklayer.dev/inklayer-demo.pdf"
    :layout-style="{ width: '100vw', height: '100vh' }"
  />
</template>

PdfAnnotator — 完整批注

<script setup>
import { PdfAnnotator } from 'inklayer-vue'
import 'inklayer-vue/style'
</script>

<template>
  <PdfAnnotator
    url="https://inklayer.dev/inklayer-demo.pdf"
    :user="{ id: 'user-1', name: 'Demo User' }"
    :layout-style="{ width: '100vw', height: '100vh' }"
  />
</template>

预期效果：与 React 版本相同 — PdfViewer 显示简洁阅读器，PdfAnnotator 显示完整批注能力。