快速开始

本教程将指导你在 5 分钟内完成 InkLayer 的安装、加载 PDF 并添加第一个批注。覆盖 React 和 Vue 两个框架，选择你熟悉的版本开始。

安装

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

React

npm install inklayer-react

Vue

npm install inklayer-vue

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

选择组件

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

下面的示例使用 PdfAnnotator（完整功能版本）。如果你只需要浏览，将组件名替换为 PdfViewer 即可，其他配置相同。

最简示例

导入组件和样式，传入 PDF 地址，即可得到一个功能完整的 PDF 批注器。

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

React

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

export default function App() {
  return (
    <PdfAnnotator
      url="https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-polyfill.pdf"
      user={{ id: 'user-1', name: 'Demo User' }}
      layoutStyle={{ width: '100vw', height: '100vh' }}
    />
  )
}

预期效果：运行后，页面会显示一个完整的 PDF 批注器。顶部是工具栏（包含高亮、画笔、矩形等 14 种批注工具），左侧是缩略图栏，右侧是批注列表。你可以立即点击任意批注工具，在 PDF 上绘制批注。

⚠️ 布局注意：PdfAnnotator 使用绝对定位内部布局，必须通过 layoutStyle 明确指定高度，否则组件不可见。layoutStyle 的值使用字符串表示（带 CSS 单位），如 '100vh'、'600px'。如果页面空白，第一步就检查 layoutStyle 是否正确。

Vue

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

<template>
  <PdfAnnotator
    url="https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-polyfill.pdf"
    :user="{ id: 'user-1', name: 'Demo User' }"
    :layout-style="{ width: '100vw', height: '100vh' }"
  />
</template>

预期效果：与 React 版本相同，页面显示完整 PDF 批注器，可直接使用所有批注工具。

⚠️ 布局注意：Vue 版本同样需要显式传入 :layout-style。值与 React 版本相同，使用字符串形式。