ARTICLE · 1140732
《前端文档预览不用愁:JitViewer,一个 SDK 吃下 Word / PDF / Excel / PPT 在线预览》
开源推荐 · 前端工具链 前端文档预览不用愁 JitViewer ｜ Vue3 · React · 原生 HTML ｜ Apache-2.0 开源免费 ｜ Star 349 |
做前端的都懂："给我加个文档在线预览"是那种一句话需求、一星期工期的活。传统方案各有各的痛：后端转 PDF 要服务器、 kkFileView 要独立部署、微软/谷歌在线预览有数据出境顾虑、自己啃 pdf.js 和 SheetJS 又是一屁股兼容性。最近在 GitHub 上看到一个项目把这些活全包了——JitViewer（jitOffice/jit-viewer-sdk）：一个纯前端的跨框架文档预览 SDK，PDF、Word、Excel、PPT、OFD、Markdown、CSV、CAD 图纸、视频、音频全都吃，Vue3 / React / 原生 HTML 三端无缝，Apache-2.0 开源免费。[1]这篇带大家过一遍。 |
一、先看仓库和官网 ① GitHub 仓库（Star 349 · Fork 50 · Apache-2.0 · 最新 v1.5.0）——  ② 官网与在线演示（jitword.com）——首屏就是格式标签墙，PDF / Word / Excel / CSV / PPT / Markdown / OFD / CAD / 图片 / 视频 / 音频 / 代码预览一排排列开；npm 徽章显示 v1.5.0 · 月下载 4.7k——  截图：github.com/jitOffice/jit-viewer-sdk · jitword.com/jit-viewer.html（2026-09） |
二、它能做什么：六件事一次说清 ① 格式全：PDF、DOCX、XLSX/XLS、PPTX/PPT、OFD、TXT、Markdown、CSV，官方页面还列出 CAD 图纸（DXF）、图片、视频、音频、代码预览——OFD 是国产版式标准，多数国外方案不支持，这对政企项目是刚需；[1] ② 跨框架：Vue3、React、原生 HTML（IIFE）三套接入方式，API 完全一致——换框架不用换预览方案；[1] ③ 工具栏开箱即用：缩放、旋转、分页、跳页、打印、下载、全屏，全部内置，一行配置开关；[1] ④ 主题与国际化：浅色 / 深色主题可自定义配色，中英文内置、可扩展；[1] ⑤ 零依赖 + 按需加载：依赖全打包，业务侧不用再装一堆 pdf.js 之类的轮子；[1] ⑥ 纯前端预览：文件源支持 URL、File 对象、Blob、ArrayBuffer——数据不出内网，这对有保密要求的项目（政务、金融、军工文档）是硬优势。[1] |
三、接入有多简单：三个框架，同一个 API 先装包： Vue3 import { createViewer } from 'jit-viewer' import 'jit-viewer/style.css' const viewer = createViewer({ target: containerRef.value, // 挂载元素 file: 'https://example.com/document.pdf', filename: 'document.pdf', theme: 'light', // 浅色 / 深色 toolbar: true, // 内置工具栏 width: '100%', height: 600, onReady: () => console.log('Viewer ready'), onLoad: () => console.log('File loaded'), onError: (e) => console.error('Error:', e) }) await viewer.mount() // 卸载时 viewer.destroy() React import { createViewer } from 'jit-viewer' import 'jit-viewer/style.css' const viewer = createViewer({ target: containerRef.current, file: 'https://example.com/document.pdf', theme: 'light', toolbar: true, height: 600 }) void viewerRef.current.mount() // 还支持 setFile(file, filename) 动态换文件， // 配 input[type=file] 就是本地上传预览 原生 HTML（IIFE，两行接入） <script src="https://unpkg.com/jit-viewer/dist/iife/jit-viewer.min.js"></script> const { createViewer } = JitViewer const viewer = createViewer({ target: '#viewer', toolbar: true }) viewer.mount() Vue3 / React 的完整 Demo 在仓库 |
四、API 面：实例方法 20+ 个 createViewer 之外，ViewerInstance 暴露了一整套命令式方法——工具栏能做的事，代码里都能做：[1]
回调有 onReady / onLoad / onError / onDestroy 四个钩子，加载失败能兜底。[1] |
五、我的看法：适合谁，注意什么 适合：① 需要合同 / 报告 / 标书在线预览的企业内部系统（文件不出内网 + OFD 支持，政企场景对口）；② 不想为预览单独部署后端服务的中小团队（纯前端零依赖，npm 一装完事）；③ 想要暗色主题、自定义配色的产品化界面需求；[1] 注意四点： ① 项目 2026 年 3 月才初始化、7 个月 20 次提交、2 位贡献者——年轻项目，生产使用前建议先过一遍自己的文档样本（尤其是复杂样式 Excel 和超大 PDF）；[1] ② Star 349、月下载 4.7k——社区规模还在早期，踩坑要靠自己提 Issue（目前 32 个开放）；[1][2] ③ .doc / .xls 老格式部分支持（pptx/ppt、xlsx/xls 都在），但 .doc 老版 Word 不在支持列表，遇到老文档要先转格式；[1] ④ Apache-2.0 允许商用，但商用前建议与作者确认（仓库留了微信：cxzk_168），也留意后续版本是否调整协议。[1] |
链接与来源 [1] GitHub：github.com/jitOffice/jit-viewer-sdk（Star 349 · Fork 50 · Apache-2.0 · v1.5.0 · 截图时间 2026-09-29） [2] 官网与在线演示：jitword.com/jit-viewer.html（npm v1.5.0 · 月下载 4.7k） |
- END -