JitPDF SDK - 企业级 PDF 预览与集成方案

功能亮点

围绕 PDF 业务接入的核心需求做减法和增强

轻量接入

保持一个清晰的初始化入口，支持组件化挂载到任何页面区域，不挤占现有业务架构。

高频 PDF 控制

内置分页、跳页、缩放、旋转、下载、全屏等高频操作，适合合同、公文、报告等多页文档场景。

可编程控制

暴露稳定实例方法与状态获取接口，方便你把 PDF 预览能力融入自己的工具条、业务按钮和流程动作里。

水印与安全策略

支持文本或图片水印覆盖，不改原始文件内容，可配合权限、代理与签名 URL 形成更完整的安全链路。

响应式适配

桌面端与移动端都可稳定运行，适合门户、审批移动页、H5 嵌入页等多种展示形态。

灵活文件源

既支持对象存储 URL，也支持本地上传文件、Blob、ArrayBuffer 和带请求头的受控文件地址。

跨框架复用

在 Vue3、React 和原生 HTML 中保持相似的使用方式，降低团队在多端项目中的重复适配成本。

主题与品牌统一

支持浅色与深色主题切换，也便于嵌入你的设计系统，保持整站视觉风格一致。

私有化扩展空间

适合和你现有权限、日志、审计、上传、存储、签章、流程等能力组合，支持进一步做私有化方案。

从接入到上线的完整能力链路

不仅能看 PDF，还要能融入你现有业务流程

典型接入流程

1

准备文件源

可以直接传 URL，也可以从你的上传组件、本地缓存、接口请求结果里拿到 File、Blob 或 ArrayBuffer。

2

初始化 SDK

通过统一配置设置主题、工具栏、初始页码、缩放比例、水印、请求适配器和错误回调。

3

挂载到业务页面

你可以把它放进详情页、审批弹窗、Tab 页、抽屉或全屏工作台中，不要求单独跳转新页面。

4

接管业务交互

借助实例方法控制翻页、缩放、下载与主题，把 PDF 预览能力与你自己的审批、签署、标记、审计流程衔接起来。

核心能力矩阵

能力项	说明
文件接入	URL、File、Blob、ArrayBuffer、带 Headers 的受控资源
页面控制	上一页、下一页、跳转指定页、获取当前页信息
视图控制	缩放、旋转、重置、全屏、主题切换
安全增强	文本/图片水印、代理地址、自定义请求适配器
接入方式	npm 包、CDN 引入、组件封装、自定义容器挂载
部署形态	云端使用、内网部署、与现有存储或网关体系集成

适合谁来用

如果你的团队已经有前端页面能力，但不想自己从零处理 PDF 预览、分页、缩放、水印和兼容性问题，JitPDF 会更像一个稳定的“PDF 能力模块”。

在线演示

按仓库 README 的真实接入方式，体验 JitPdfEditor 的挂载式集成流程

演示操作：

上传本地 PDF

当前模式： createIndexedDbPdfEditorService() mountJitPdfEditor() theme="blue-enterprise" locale="zh-CN"

加载后立即挂载 JitPdfEditor

这个 demo 按照仓库 `examples/html-demo/index.html` 的思路实现：先通过 `uploadFile()` 导入本地工作区，再使用 `mountJitPdfEditor()` 挂载编辑器。

选择本地 PDF

当前演示说明

当前示例基于仓库 README 中推荐的纯本地模式：`createIndexedDbPdfEditorService()` + `mountJitPdfEditor()`，适合无后端接入的 POC、静态 HTML 页面与传统系统嵌入场景。

当前文件

尚未加载

接入入口

window.JitPdfSdk / mountJitPdfEditor

存储模式

IndexedDB 本地模式

演示要点

内置企业蓝色主题、工具栏、缩略图导航和批注工作区
支持本地 PDF 上传并持久化到 IndexedDB，便于快速验证
浏览器挂载式集成适合 HTML、JSP、PHP、低代码和多框架容器
同一套 SDK 可切换到 `createHttpPdfEditorService()` 对接生产文件服务
支持 `ready`、`save-success`、`load-error` 等生命周期事件回调

接入文档

支持 npm 安装与 CDN 引入，面向现代前端项目快速落地

安装依赖

            # npm
npm install jit-pdf vue

# yarn
yarn add jit-pdf vue

# pnpm
pnpm add jit-pdf vue
          

V Vue3 纯本地模式

App.vue

                <template>
  <div style="height: 100vh">
    <input type="file" accept=".pdf,application/pdf" @change="onFileChange" />
    <JitPdfEditor
      v-if="source"
      :source="source"
      :service="service"
      locale="zh-CN"
      theme="blue-enterprise"
    />
  </div>
</template>

<script setup>
import { ref } from "vue"
import "jit-pdf/styles.css"
import {
  JitPdfEditor,
  createIndexedDbPdfEditorService,
  type PdfSource
} from "jit-pdf"

const service = createIndexedDbPdfEditorService({
  databaseName: "my-jit-pdf"
})

const source = ref<PdfSource | null>(null)

async function onFileChange(event) {
  const input = event.target
  const file = input.files?.[0]
  if (!file) return

  const uploaded = await service.uploadFile(file)
  source.value = {
    type: "local",
    fileId: uploaded.id,
    name: uploaded.name
  }
}
</script>
              

R React / Angular 挂载式接入

PdfPanel.tsx

                import { useEffect, useRef } from 'react'
import 'jit-pdf/styles.css'
import {
  createIndexedDbPdfEditorService,
  mountJitPdfEditor
} from 'jit-pdf/browser'

const service = createIndexedDbPdfEditorService({
  databaseName: 'jit-pdf-react-demo'
})

export function PdfPanel({ fileId, fileName }) {
  const containerRef = useRef(null)

  useEffect(() => {
    if (!containerRef.current) return

    const mounted = mountJitPdfEditor({
      target: containerRef.current,
      source: {
        type: 'local',
        fileId,
        name: fileName
      },
      service,
      locale: 'zh-CN',
      theme: 'blue-enterprise'
    })

    return () => mounted.unmount()
  }, [fileId, fileName])

  return <div ref={containerRef} style={{ height: '100vh' }} />
}
              

1

引入 SDK 文件

适合静态页面、低代码平台、内嵌门户和快速验证场景

index.html

                  <!-- 推荐使用 jsDelivr CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jit-pdf@latest/dist/style.css" />
<script src="https://cdn.jsdelivr.net/npm/jit-pdf@latest/dist/jit-pdf.umd.js"></script>

<!-- 或使用 unpkg CDN -->
<link rel="stylesheet" href="https://unpkg.com/jit-pdf@latest/dist/style.css" />
<script src="https://unpkg.com/jit-pdf@latest/dist/jit-pdf.umd.js"></script>
                

2

准备挂载容器与文件输入

纯 HTML 示例通过文件选择器导入 PDF，再把编辑器挂载到容器上

HTML

                  <div id="toolbar">
  <input id="fileInput" type="file" accept=".pdf,application/pdf" />
</div>
<div id="app" style="height: calc(100% - 48px)"></div>
                

3

上传文件后挂载编辑器

这段代码来自仓库的 HTML demo 思路：先 `uploadFile()`，再用 `mountJitPdfEditor()` 挂载

JavaScript

                  const { createIndexedDbPdfEditorService, mountJitPdfEditor } = window.JitPdfSdk
const service = createIndexedDbPdfEditorService({
  databaseName: "jit-pdf-html-demo"
})

let mounted = null

document.getElementById("fileInput").addEventListener("change", async (event) => {
  const file = event.target.files && event.target.files[0]
  if (!file) return

  const uploaded = await service.uploadFile(file)
  if (mounted) mounted.unmount()

  mounted = mountJitPdfEditor({
    target: "#app",
    source: {
      type: "local",
      fileId: uploaded.id,
      name: uploaded.name
    },
    service,
    locale: "zh-CN",
    theme: "blue-enterprise"
  })
})
                

API 文档

按仓库 README 中的真实对外 API，整理成更适合接入评估的速查页

JitPdfEditorProps / mountJitPdfEditor(options)

参数	类型	默认值	说明
`source`	PdfSource	-	文档来源，支持 `local`、`remote`、`url`
`service`	PdfEditorService	-	文件与批注的服务抽象，通常由 `createIndexedDbPdfEditorService()` 或 `createHttpPdfEditorService()` 生成
`theme`	'blue-enterprise'	'blue-enterprise'	企业蓝色主题，仓库示例默认使用该主题
`locale`	'zh-CN'	'zh-CN'	当前 README 中公开的示例语言配置
`capabilities`	Partial<PdfEditorCapabilities>	-	能力开关配置，可按业务场景裁剪编辑器能力
`readonly`	boolean	false	是否只读，可用于仅查看、不可编辑的业务页面
`target`	HTMLElement \| string	-	仅在 `mountJitPdfEditor()` 模式下需要，用于指定挂载容器
`onReady`	function	-	文档就绪回调，可读取 `documentId`
`onSaveSuccess`	function	-	保存副本成功回调，可读取 `relativePath`
`onLoadError`	function	-	加载失败回调，可读取错误信息

服务工厂与挂载能力

服务工厂

方法	参数	说明
`createIndexedDbPdfEditorService(options)`	databaseName	纯前端本地模式，PDF 与批注都保存在浏览器 IndexedDB 中
`createHttpPdfEditorService(options)`	baseUrl, annotationDatabaseName	服务端文件模式，适合生产环境、流式读取和本地文件服务集成
`mountJitPdfEditor(options)`	target, source, service, locale, theme	浏览器挂载式入口，适合 React、Angular、静态 HTML、低代码等非 Vue 场景

PdfEditorService 方法

方法	参数	说明
`getFileList()`	-	获取文件列表
`getFileMeta(fileId)`	string	读取文件元信息
`getFileHistory(fileId)`	string	读取历史副本信息
`getFileStreamUrl(fileId)`	string	获取流式预览地址
`uploadFile(file)`	File	上传 PDF 到本地工作区或远端文件服务
`deleteFile(fileId)`	string	删除文件
`saveCopy(input)`	SaveCopyInput	保存当前文档副本
`loadAnnotations(fileId)`	string	加载批注快照
`saveAnnotations(fileId, annotations)`	string, PdfAnnotationSnapshot[]	持久化批注快照

挂载返回值与来源类型

方法	参数	说明
`mounted.unmount()`	-	卸载浏览器挂载的编辑器实例
`PdfSource.local`	{ type: 'local', fileId, name? }	本地模式，通过 `uploadFile()` 后得到 fileId
`PdfSource.remote`	{ type: 'remote', fileId, name? }	服务端文件模式，适合生产环境和本地文件服务接入
`PdfSource.url`	{ type: 'url', url, name? }	直接通过 URL 加载文档

生命周期事件

事件名	参数	说明
`ready`	event.documentId	文档已就绪
`dirty-change`	state	编辑器内容脏状态变化
`save-start`	-	开始保存副本
`save-success`	result.relativePath	副本保存成功
`save-error`	error	保存副本失败
`load-error`	error.message	文档加载失败

事件监听示例

                const mounted = mountJitPdfEditor({
  target: '#app',
  source,
  service,
  onReady(event) {
    console.log('文档已就绪', event.documentId)
  },
  onSaveSuccess(result) {
    console.log('副本保存成功', result.relativePath)
  },
  onLoadError(error) {
    console.error('加载失败', error.message)
  }
})

// 卸载时调用
mounted.unmount()
              

使用示例

按仓库中的 Vue demo、HTML demo 和 README 示例整理

Vue 本地模式

上传后直接渲染 JitPdfEditor

适合本地调研、组件演示、无后端的 POC 场景

              import { ref } from "vue"
import "jit-pdf/styles.css"
import {
  JitPdfEditor,
  createIndexedDbPdfEditorService,
  type PdfSource
} from "jit-pdf"

const service = createIndexedDbPdfEditorService({
  databaseName: "jit-pdf-vue-demo"
})
const source = ref<PdfSource | null>(null)

const uploaded = await service.uploadFile(file)
source.value = {
  type: "local",
  fileId: uploaded.id,
  name: uploaded.name
}
            

Vue 服务端模式

切换到 Http 文件服务

适合生产环境、流式预览、历史副本和本地文件服务接入

              import { createHttpPdfEditorService } from "jit-pdf"

const service = createHttpPdfEditorService({
  baseUrl: "http://localhost:4000",
  annotationDatabaseName: "jit-pdf-annotations"
})

<JitPdfEditor
  :source="{ type: 'remote', fileId: 'your-file-id' }"
  :service="service"
  locale="zh-CN"
  theme="blue-enterprise"
/>
            

HTML 直引

纯 HTML / JSP / PHP 页面挂载

适合静态页、传统模板引擎和低耦合集成场景

              const { createIndexedDbPdfEditorService, mountJitPdfEditor } = window.JitPdfSdk
const service = createIndexedDbPdfEditorService({
  databaseName: "jit-pdf-html-demo"
})

const uploaded = await service.uploadFile(file)

mountJitPdfEditor({
  target: "#app",
  source: {
    type: "local",
    fileId: uploaded.id,
    name: uploaded.name
  },
  service,
  locale: "zh-CN",
  theme: "blue-enterprise"
})
            

事件回调

接入业务流程的生命周期监听

适合保存副本、加载错误提示、审计日志和流程状态联动

              mountJitPdfEditor({
  target: "#app",
  source,
  service,
  onReady(event) {
    console.log("文档已就绪", event.documentId)
  },
  onSaveSuccess(result) {
    console.log("副本保存成功", result.relativePath)
  },
  onLoadError(error) {
    console.error("加载失败", error.message)
  }
})
            

反馈与支持

如果你正在做 PDF 在线预览、合同审批、公文查看、知识文档展示等项目，欢迎联系我们一起评估接入方式

JitPDF SDK 企业级 PDF 在线预览与集成方案

为什么做一个独立的 JitPDF SDK