Vue PDF 渲染、签名与批注库：InkLayer 完整指南

如果你正在寻找一个支持 PDF 渲染、签名和批注的 Vue 3 类库，InkLayer 提供了可以直接安装的 PdfViewer 和 PdfAnnotator 组件。它基于 PDF.js，支持高亮、评论、自由手绘、手写或图片签名、印章、批注持久化以及 PDF 导出。

npm install inklayer-vue

你的需求	InkLayer 对应能力
在 Vue 中渲染 PDF	`PdfViewer`，内置缩放、搜索、打印与页面导航
添加高亮、评论和图形	`PdfAnnotator`，提供完整批注工具栏与 14 种批注类型
在 PDF 上签名	手绘签名、输入签名或上传签名图片
保存和恢复批注	通过 JSON 数据接入后端或本地存储
交付审阅结果	导出带批注的 PDF 或 Excel 审阅记录

你可以先在线体验 PDF 批注，或直接查看Vue SDK 文档。

签名能力边界： InkLayer 的签名属于可视化 PDF 批注，适合手写、输入或上传签名图片；它不等同于使用数字证书的 PAdES/PKCS#7 密码学签名。如果业务要求证书验证、可信时间戳或合规签署流程，需要另外接入数字签名服务。

为什么 PDF.js 还不等于 Vue PDF 批注器

PDF.js 解决的是 PDF 解析和页面渲染。直接在 Vue 项目里使用它，你仍然需要自行完成：

缩放、翻页、搜索和缩略图界面；
高亮选区与 PDF 坐标转换；
手绘、签名、印章和形状工具；
批注选中、拖拽、缩放与删除；
评论回复、用户归属和权限；
JSON 保存、恢复以及 PDF 导出。

InkLayer 在 PDF.js 渲染能力之上提供 Vue 组件、批注数据模型和交互层，让业务代码可以围绕 Props、事件和插槽展开。

第一步：注册 Vue 插件

Vue 版本需要在应用入口注册插件：

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

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

然后在组件中导入样式：

<script setup lang="ts">
import { PdfAnnotator } from 'inklayer-vue'
import 'inklayer-vue/style'
</script>

第二步：渲染一个可批注的 PDF

最小示例只需要 PDF 地址、当前用户和容器高度：

<script setup lang="ts">
import { PdfAnnotator } from 'inklayer-vue'
import 'inklayer-vue/style'
</script>

<template>
  <PdfAnnotator
    url="https://inklayer.dev/inklayer-demo.pdf"
    locale="zh-CN"
    :user="{ id: 'reviewer-1', name: '张三' }"
    :layout-style="{ width: '100%', height: '100vh' }"
  />
</template>

PdfAnnotator 已经包含 PDF Viewer、批注工具栏和批注侧栏。只需要阅读 PDF、不允许编辑批注时，可以改用 PdfViewer。

高亮、评论和批注事件

Vue 使用模板事件接收批注变化：

<script setup lang="ts">
import type { Annotation } from 'inklayer-vue'

function handleAdded(annotation: Annotation) {
  console.log('新增批注：', annotation.id, annotation.kind)
}

function handleUpdated(annotation: Annotation) {
  console.log('批注或评论已更新：', annotation.id)
}
</script>

<template>
  <PdfAnnotator
    url="/contract.pdf"
    :user="{ id: 'reviewer-1', name: '张三' }"
    @annotation-added="handleAdded"
    @annotation-updated="handleUpdated"
    @annotation-deleted="(id) => console.log('删除：', id)"
    @annotation-selected="(annotation, isClick) => console.log(annotation?.id, isClick)"
  />
</template>

高亮、下划线和删除线会保存文字选区的四边形坐标；自由手绘会保存路径点；评论和回复会与对应批注一起保存。缩放页面时，批注仍然使用 PDF 用户空间保持对齐。

手绘、输入和图片签名

签名工具支持三种入口：Draw、Enter 和 Upload。可以通过 defaultOptions.signature 设置默认模式、允许的图片格式和字体：

<script setup lang="ts">
const defaultOptions = {
  signature: {
    type: 'Draw' as const,
    accept: 'image/png,image/jpeg',
    maxSize: 2 * 1024 * 1024,
    defaultSignature: [],
    defaultFont: [
      { label: '楷体', value: 'STKaiti', external: false },
    ],
  },
}
</script>

<template>
  <PdfAnnotator
    url="/contract.pdf"
    :user="{ id: 'signer-1', name: '签署人' }"
    :default-options="defaultOptions"
  />
</template>

signature.type 必须使用首字母大写的 'Draw' | 'Enter' | 'Upload'。

保存和恢复批注

@save 会返回完整的 Annotation[]。应用可以将它作为 JSON 保存到后端：

<script setup lang="ts">
import { ref } from 'vue'
import type { Annotation } from 'inklayer-vue'

const annotations = ref<Annotation[]>([])

async function handleSave(data: Annotation[]) {
  annotations.value = data
  await fetch('/api/documents/contract-1/annotations', {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  })
}
</script>

<template>
  <PdfAnnotator
    url="/contract.pdf"
    :user="{ id: 'reviewer-1', name: '张三' }"
    :initial-annotations="annotations"
    @save="handleSave"
  />
</template>

恢复时应保留批注 ID、几何坐标和作者信息。启用 owner-only 权限后，作者 ID 还会用于判断谁能编辑或删除批注。

导出 PDF 和审阅记录

通过 actions 插槽可以把保存和导出操作接入自己的工具栏：

<template>
  <PdfAnnotator url="/contract.pdf" :user="{ id: 'reviewer-1', name: '张三' }">
    <template #actions="{ onSave, exportToPdf, exportToExcel }">
      <button @click="onSave()">保存</button>
      <button @click="exportToPdf('合同审阅版')">导出 PDF</button>
      <button @click="exportToExcel('审阅记录')">导出 Excel</button>
    </template>
  </PdfAnnotator>
</template>

PDF 导出适合交付包含可见批注的文档；
Excel 导出适合整理批注作者、内容和处理状态；
应用自己的 JSON 数据仍然是继续编辑和协作的主要来源。

Vue PDF 批注方案怎么选

方案	适合场景	主要成本
直接使用 PDF.js	需要完全控制底层渲染	自行实现全部批注 UI、坐标和数据层
只使用高亮组件	需求仅限文字高亮和简单评论	后续增加签名、形状和导出时需要扩展
使用 InkLayer	需要查看、批注、签名、评论、保存和导出	接入 Vue 插件，并连接自己的数据与权限系统
商业 PDF SDK	需要厂商支持或特定合规能力	授权成本和供应商约束

常见问题

InkLayer Vue 支持哪些批注？

包括高亮、下划线、删除线、自由文本、矩形、圆形、自由手绘、自由高亮、签名、印章、便签、箭头、云朵和选区等 14 种类型。

批注是否会随缩放错位？

批注几何数据使用 PDF 用户空间保存，并在渲染时映射到当前视口，因此可以在不同缩放比例下保持对齐。

可以限制用户只能编辑自己的批注吗？

可以。通过 annotationPermissions 的 owner-only 模式结合稳定的 user.id 实现。完整规则见协作批注权限。

签名是否具有数字证书效力？

InkLayer 负责签名的可视化放置和 PDF 批注数据，不签发或验证数字证书。需要 PAdES、可信时间戳或身份认证时，应在业务系统中接入对应服务。

下一步

在线体验 PDF 批注 — 测试高亮、评论、签名和导出流程
Vue SDK 文档 — 查看完整 Props、事件和插槽
快速开始 — 从 Starter 或最小示例开始
批注数据模型 — 了解坐标、几何结构与持久化格式