Jit-PDF 1.0:一款高性能PDF预览+批注SDK,正式发布

最近一直在深耕 AI Agent 与大模型应用，比如 JitKnow AI 知识库、JitWord协同AI文档、Pxcharts超级表格。

今天很高兴的和大家分享一下，我们最新上线并开源的PDF预览/批注神器——JitPDF。

github地址：https://github.com/jitOffice/jit-pdf-sdk

文档演示地址：https://jitword.com/jit-pdf.html

为什么要做一个独立的 JitPDF SDK

我们沟通调研了大量客户的实际需求，发现很多业务系统并不需要一个“大而全”的文档平台，而是需要一个足够稳定、足够专业、能在页面里快速落地的 PDF 预览能力。 JitPDF 就是把最常用、最关键的 PDF 能力抽成一个可嵌入、可控制、可定制的 SDK。

不管大家使用的是哪类技术栈，JitPDF 都能零侵入的快速嵌入现有系统。

SDK 提供统一的挂载方式、文件源接入方式以及一组稳定的控制 API，适合在合同、审批、公文、知识、档案、财务等高频 PDF 场景中复用。

下面给大家看一下嵌入到其他系统的演示效果：

1. 预览PDF

2. 对PDF进行批注/涂鸦

3. 对PDF内容进行搜索

4. 批注管理/多选

如果大家还需要进一步做签章前预览、水印叠加、鉴权请求、暗色主题或私有化部署，JitPDF 也可以沿着这条路径继续扩展。

JitPDF SDK应用场景

下面我来总结一下它的应用场景和试用范围，供大家参考：

应用场景：

合同审批 / 电子签章前预览
档案系统 / 公文系统 / 知识库公文系统 / 知识库
档案客户门户 / 工单附件在线查看系统 / 公文系统 / 知识库
财报、报告、制度文件统一展示

适合接入的系统如下：

下面和大家分享一下如何使用。

JitPDF SDK快速接入教程

首先JitPDF支持通过npm和CDN的方式集成到项目中，我们可以通过如下方式安装：

# npmnpm install jit-pdf vue# yarnyarn add jit-pdf vue# pnpmpnpm add jit-pdf vue

如果大家擅长使用Vue技术栈，可以像如下方式在代码中使用：

<template>  <divstyle="height: 100vh">    <inputtype="file"accept=".pdf,application/pdf" @change="onFileChange" />    <JitPdfEditor      v-if="source"      :source="source"      :service="service"      locale="zh-CN"      theme="blue-enterprise"    />  </div></template><scriptsetup>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>

当然，大家也可以在React和Angular项目中使用，具体教程和代码如下：

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 <divref={containerRef}style={{height: '100vh' }} />}