今天给大家分享一款我借助AI， 开发的一款开源 Office 文件预览SDK。
我把它起名叫 jit-Viewer，刚好和我们做的 JitWord 协同AI文档相呼应。它主要的功能就是可以在浏览器中一键预览 Docx，PDF，Excel，PPT，Markdown，Txt等各种格式的文件。
同时只需要3行代码，就可以轻松集成到Vue，React，Angular，Html项目中。话不多说，先上开源地址。
github：github.com/jitOffice/j…
核心功能亮点
jit-viewer 不依赖后端转换，而是直接在浏览器端解析 Office Open XML 格式（.docx/.xlsx/.pptx 的底层结构），最后通过 jit-viewer 封装的渲染器渲染成可视化组件。PDF 预览则是基于 PDF.js 做深度优化。
所以我们完全不依赖后端，同时目前支持的文件预览方式有：
- 本地上传文件
- 通过url地址直接预览文件
这2种方式基本上是用户需求最多的方式。
总结几个核心亮点，方便大家参考评估：
- 零后端依赖，纯前端渲染：无需配置任何后端服务，静态站点也能用
- 框架无绑定：一个SDK同时支持Vue/React/Angular，团队技术栈切换无成本
- 隐私安全：文件解析在浏览器本地完成，不上传服务器
- 性能优异：虚拟滚动 + Web Worker，大文件不卡主线程
- 扩展性强：插件化架构，可自定义渲染器、添加水印、集成审批流
这里我在补充一条，目前预览访问不仅能在PC端预览，还能直接在移动端预览：
充分满足大家移动办公的需求。
同时为了提供开发人员对预览的样式控制，我还支持了预览控件：
- 下载文件
- 缩放重置
- 旋转功能
- 全屏
- 主题切换
- 获取文档信息
后续会持续优化一些更可控的功能供大家使用。
如何本地使用
我在 jit-viewer 文档中写了详细的本地使用教程，接下来给大家分享一下。
第一步，引入SDK：
<!-- 引入样式文件 -->
<link rel="stylesheet" href="jit-viewer.min.css">
<!-- 引入 JitViewer SDK -->
<script src="jit-viewer.min.js"></script>
第二步，创建预览容器：
<div id="viewer" style="width: 100%; height: 600px;"></div>
第三步，初始化实例：
// 创建预览器实例
const viewer = JitViewer.createViewer({
file: 'document.pdf', // 文件 URL
filename: 'document.pdf', // 文件名（可选）
toolbar: true, // 显示工具栏
theme: 'light', // 主题
width: '100%',
height: '600px',
onReady: () => console.log('准备就绪'),
onLoad: () => console.log('加载完成'),
onError: (err) => console.error('错误:', err)
});
// 挂载到 DOM
viewer.mount('#viewer');
是不是非常简单？只需要3步，就能快速集成到你的系统中实现 Office 文件预览功能。
我在文档中也写了详细的API介绍，大家想定制SDK样式和交互，也可以参考文档：
小小总结一下
之所以要做这个项目，完全来自于之前的客户的一个需求，为了给我们的客户赋能，我们便做了这个开源SDK。
后续会继续迭代优化，实现更多文件类型的预览功能，大家有好的建议也欢迎留言区交流反馈～
对于AI，其实并不是全程参与开发（尤其是复杂的业务需求），大家短期内还是不用太神话AI的能力。
对于SDK的工程化方案（脚手架），我是完全交给AI来实现的，同时从文档的编写，网站demo的设计，也都是交给AI做的，到这里，AI基本能代替40%左右的工作了。
我提供的是SDK的产品需求，设计思路，技术选型，和设计风格，同时兼顾测试工程师的角色，这块其实是目前AI人机协作的常态。
所以技术能力还是需要，用好AI可能更好的为我们的工作和产品研发提效。
新的竞争力在于：架构设计的品味、安全风险的嗅觉、人机协作的智慧，以及对自己代码的深刻理解。
github：github.com/jitOffice/j…
