jit-viewer详细介绍-马育民老师

# 介绍

**jit-viewer** 是国内开源、**纯前端离线文档预览SDK**，核心特点：**无需后端转换服务、文件本地浏览器解析不上传服务器、全格式统一预览、兼容Vue/React/原生JS/Blazor**，主打企业系统、网盘、文档管理平台集成Office/PDF/CAD/3D/代码等全品类文件预览。

### **开源地址**

Github：https://github.com/jitOffice/jit-viewer-sdk
Gitee：https://gitee.com/lowcode-china/jit-viewer
在线演示：https://jitword.com/jit-viewer.html

### **包管理**

NPM发布`jit-viewer`，当前稳定版**v1.5.0（2026-04更新）**

### **授权**

开源免费商用、无文件数量/预览次数限制，内置版权防盗锁定（私自移除水印/版权会全屏锁定预览）

### ✅ 优势
1. **零后端成本**：不用部署LibreOffice、PDF转换服务，节省服务器资源；
2. **数据安全**：文件浏览器本地解析，不外发服务器，适合政务、涉密、金融内网；
3. **格式还原度高**：Office复杂表格、公式、排版优于零散JS库；
4. **按需加载**：插件化架构，不用CAD/3D则不加载对应WASM包，减少打包体积；
5. **全格式统一API**：所有文件一套初始化代码，降低多格式集成成本。

### ❌ 局限性
1. **超大文件受限**：单文件＞500MB CAD/3D文件受浏览器内存限制，建议桌面端打开；
2. **老旧二进制格式**：.doc/.xls/.ppt（非OOXML老格式）部分复杂格式兼容性一般，优先推荐docx/xlsx；
3. **极端加密PDF**：部分高强度加密PDF无法前端解密预览，需后端提前解密文件流。

### 适用业务场景
1. 企业OA、文档管理系统、私有网盘；
2. 国产化项目（OFD国产版式预览刚需）；
3. 代码仓库、低代码平台在线文件预览；
4. 工业项目图纸（DXF/3D模型）在线查看；
5. 内网私有化部署系统（不能出网，禁用第三方云预览）。

# 原理

传统预览3种痛点：

- LibreOffice后端转PDF：服务器CPU负载高、格式错位、大文件等待久；
- 第三方在线预览API：文件外传、隐私泄露、按量计费成本高；
- 碎片化前端库（mammoth+sheetjs+pdfjs）：多库割裂、PPT兼容极差、集成繁琐。

#### **jit-viewer实现逻辑**

浏览器端通过**JS+WASM原生解析文件二进制**，直接解析docx/xlsx/pptx/OFD/PDF底层OpenXML结构，不靠后端转码；PDF基于pdfjs-dist深度二次封装，CAD/3D靠WASM轻量化解析，**文件全程在浏览器内存解析，不会上传云端**，满足涉密内网、国产化系统场景。

# 支持预览格式（全品类覆盖）
### 1. 办公文档
`DOCX/DOC、XLSX/XLS、PPTX/PPT、PDF、OFD(国产版式)、CSV/TSV、TXT、Markdown`
### 2. 代码文件（自动语法高亮）
Java/Python/JS/TS/C#/Go/PHP/CSS/HTML等几十种编程语言，开发平台代码在线预览首选
### 3. 多媒体
JPG/PNG/GIF等图片、MP4/MP3等音视频（内置自研播放器，可控播放API）
### 4. 工程图纸&3D模型
- CAD：DXF原生解析，DWG/DWF通过适配器兼容；
- 3D：GLB、GLTF、STL三维模型在线旋转缩放预览

# 支持开发环境
原生HTML、Vue3、React、Blazor、Svelte、Angular全前端框架。

# 接入方式
### 原生HTML引入（3行最简代码）
```html
<link rel="stylesheet" href="https://unpkg.com/jit-viewer/dist/iife/jit-viewer.min.css">
<script src="https://unpkg.com/jit-viewer/dist/iife/jit-viewer.min.js">
<div id="viewer" style="width:100%;height:600px"></div>
<script>
const {createViewer}=JitViewer;
createViewer({
  el:'#viewer',
  file:'test.docx',//本地Blob/远程URL/ArrayBuffer均可
  toolbar:true
})
</script>
```

### NPM模块化（Vue/React项目）

```bash
npm install jit-viewer
```
Vue3示例：
```ts
import {createViewer} from 'jit-viewer'
import 'jit-viewer/style.css'
createViewer({el:containerDom,file:'xxx.pdf'})
```

# 内置功能配置项
1. **UI配置**：明暗双主题、中英文国际化、自定义宽高、开关顶部工具栏（缩放/翻页/打印/下载/全屏）；
2. **水印能力**：文字/图片平铺水印、透明度、倾斜角度、层级（顶层/底层），企业版权管控；
3. **文件源**：本地File对象、远程HTTP链接、Blob、ArrayBuffer、自定义请求拦截适配器（适配内网私有存储）；
4. **生命周期钩子**：onReady初始化就绪、onLoad文件渲染完成、onError异常捕获；
5. **离线能力（V1.5重大升级）**：PDF Worker内置打包Blob URL，**完全脱离CDN、纯离线部署**，内网私有化项目首选。

原文出处：http://malaoshi.top/show_1GW3R47RBap7.html