借助AI,1周,0后端成本,我们开源了一款Office预览SDK

今天给大家分享一款我借助AI, 开发的一款开源 Office 文件预览SDK。

我把它起名叫 jit-Viewer ,刚好和我们做的 JitWord 协同AI文档相呼应。

它主要的功能就是++可以在浏览器中一键预览++ ++Docx,PDF,Excel,PPT,Markdown,Txt++ ++等各种格式的文件++。

同时只需要3行代码,就可以轻松集成到Vue,React,Angular,Html项目中。

话不多说,先上开源地址。

github:++https://github.com/jitOffice/jit-viewer-sdk++

核心功能亮点

jit-viewer 不依赖后端转换,而是直接在浏览器端解析 Office Open XML 格式(.docx/.xlsx/.pptx 的底层结构),最后通过jit-viewer 封装的渲染器渲染成可视化组件。PDF 预览则是基于 PDF.js 做深度优化。

所以我们完全不依赖后端,同时目前支持的文件预览方式有:

  • 本地上传文件

  • 通过url地址直接预览文件

这2种方式基本上是用户需求最多的方式。

总结几个核心亮点,方便大家参考评估:

  1. 零后端依赖,纯前端渲染:无需配置任何后端服务,静态站点也能用

  2. 框架无绑定:一个SDK同时支持Vue/React/Angular,团队技术栈切换无成本

  3. 隐私安全:文件解析在浏览器本地完成,不上传服务器

  4. 性能优异:虚拟滚动 + Web Worker,大文件不卡主线程

  5. 扩展性强:插件化架构,可自定义渲染器、添加水印、集成审批流

这里我在补充一条,目前预览访问不仅能在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)});// 挂载到 DOMviewer.mount('#viewer');

是不是非常简单?只需要3步,就能快速集成到你的系统中实现 Office 文件预览功能。

我在文档中也写了详细的API介绍,大家想定制SDK样式和交互,也可以参考文档:

文档地址:++https://jitword.com/jit-viewer.html++

小小总结一下

之所以要做这个项目,完全来自于之前的客户的一个需求,为了给我们的客户赋能,我们便做了这个开源SDK。

后续会继续迭代优化,实现更多文件类型的预览功能,大家有好的建议也欢迎留言区交流反馈~

对于AI,其实并不是全程参与开发(尤其是复杂的业务需求),大家短期内还是不用太神话AI的能力。

对于SDK的工程化方案(脚手架),我是完全交给AI来实现的,同时从文档的编写,网站demo的设计,也都是交给AI做的,到这里,AI基本能代替40%左右的工作了。

我提供的是SDK的产品需求,设计思路,技术选型,和设计风格,同时兼顾测试工程师的角色,这块其实是目前AI人机协作的常态

所以技术能力还是需要,用好AI可能更好的为我们的工作和产品研发提效。

新的竞争力 在于:++架构设计的品味、安全风险的嗅觉、人机协作的智慧,以及++ ++对自己代码的深刻理解++ ++。++

github:++https://github.com/jitOffice/jit-viewer-sdk++

相关推荐
一点一木4 小时前
深度体验TRAE SOLO移动端7天:作为独立开发者,我把工作流揣进了兜里
前端·人工智能·trae
天外飞雨道沧桑4 小时前
TypeScript 中 omit 和 record 用法
前端·javascript·typescript
Lee川4 小时前
mini-cursor 揭秘:从 Tool 定义到 Agent 循环的完整实现
前端·人工智能·后端
该昵称用户已存在5 小时前
能碳数据治理与建模引擎:MyEMS 开源方案打造企业能源管理数字底座
开源
weelinking5 小时前
【产品】00_产品经理用Claude实现产品系列介绍
数据库·人工智能·sql·数据挖掘·github·产品经理
Agent产品评测局5 小时前
制造业模具管理AI系统,主流产品能力对比详解:2026年智能制造选型深度洞察
人工智能·ai·chatgpt·制造
canonical_entropy5 小时前
从 Spec-Driven Development 到 Attractor-Guided Engineering
前端·aigc·ai编程
研☆香5 小时前
聊聊前端页面的三种长度单位
前端
研华科技Advantech5 小时前
如何用一套实训设备,打通工业AI预测性维护技术全流程?
人工智能
Lab_AI5 小时前
AI for Science: MaXFlow AI Agent+ 报告体验双升级,让AI智能体更高效易用!
人工智能·ai for science·ai agent·ai智能体