jit-viewer详细介绍 作者:马育民 • 2026-06-04 14:40 • 阅读:10002 # 介绍 **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 ``` ### 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