小編精選 - 技術文章翻譯 · 03月23日

藉由 AI，一週、零後端成本，我開源了一款 Office 預覽 SDK

==================================

今天給大家分享一款我借助 AI 開發的開源 Office 檔案預覽 SDK。

我把它命名為 jit-Viewer，剛好與我們做的 JitWord 協同 AI 文件相呼應。它主要的功能是在瀏覽器中一鍵預覽 .docx、PDF、Excel、PPT、Markdown、Txt 等各種格式的檔案。

同時只需要 3 行程式碼，就可以輕鬆整合到 Vue、React、Angular、HTML 專案中。話不多說，先上開源位址。

github： github.com/jitOffice/j…
國內鏡像： gitee.com/lowcode-chi…
示範地址： jitword.com/jit-viewer.…

核心功能亮點

jit-viewer 不依賴後端轉換，而是直接在瀏覽器端解析 Office Open XML 格式（.docx/.xlsx/.pptx 的底層結構），最後透過 jit-viewer 封裝的渲染器渲染成可視化元件。PDF 預覽則是基於 PDF.js 做深度優化。

所以我們完全不依賴後端，目前支持的檔案預覽方式有：

本地上傳檔案
透過 URL 地址直接預覽檔案

這兩種方式基本上是使用者需求最多的方式。

總結幾個核心亮點，方便大家參考評估：

零後端依賴，純前端渲染：無需設定任何後端服務，靜態站點也能使用
框架無綁定：一個 SDK 同時支援 Vue/React/Angular，團隊技術棧切換無成本
隱私安全：檔案解析在瀏覽器本地完成，不上傳伺服器
效能優異：虛擬滾動 + Web Worker，大檔案不卡主執行緒
擴充性強：插件化架構，可自訂渲染器、加入浮水印、整合審批流程

這裡補充一條，目前預覽不僅在 PC 端，也支援行動裝置直接預覽：

充分滿足大家行動辦公的需求。

同時為了提供開發者對預覽樣式的控制，我還支援了預覽工具列：

下載檔案
縮放重置
旋轉功能
全螢幕
主題切換
取得檔案資訊

後續會持續優化更多可控功能供大家使用。

如何在本機使用

我在 jit-viewer 文件中寫了詳細的本機使用教學，接下來示範幾個基本步驟。

第一步，引入 SDK：

<link rel="stylesheet" href="jit-viewer.min.css">
<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 樣式和互動也可以參考文件：