最近工作上剛好碰到一個需求：
希望使用者可以直接在 Web 系統裡編輯 Word。
想要的流程其實很簡單：
ginting_wu
開啟網頁 → 開啟 DOCX → 編輯 → 下載 DOCX
但有一個前提，我不希望使用者還要另外安裝 Microsoft Office，也不想走 Socket、ActiveX 或其他方式去控制使用者電腦上的 Word。
找了一些現成方案後，發現要完全符合這個使用方式沒有想像中容易，所以後來乾脆自己做了一版。
目前已經做到可以實際操作的程度，就放上來給大家玩玩看，也想順便收集一些不同 DOCX 的測試案例。
專案名稱：Online DOCX Editor
主要用途就是讓使用者直接在瀏覽器裡開啟及編輯 DOCX。
目前已經可以：
目前算是 Demo / 持續開發中。
基本功能已經可以使用，不過 DOCX 格式本身滿複雜的，不同 Word 文件也常常會出現一些奇怪的 Edge Case，所以相容性目前還在慢慢補。
做企業系統其實滿常碰到 Word。
像是：
最常見的處理方式大概就是：
下載 Word
↓
用 Office 修改
↓
重新上傳
可以用，但操作上就是多了幾個步驟。
另一種做法是裝 Client 端程式，再透過 Socket 或 Bridge 去呼叫使用者電腦上的 Microsoft Word。
這種方式可以直接使用 Word 本身的功能，但相對也會多一些環境上的限制，例如使用者要安裝 Office、Client 要設定、瀏覽器要跟本機程式溝通等等。
所以我想試看看能不能把流程單純變成：
DOCX → Browser → Edit → DOCX
盡量讓整個編輯流程都留在 Web 裡。
整體流程大概是：
DOCX
↓
文件解析
↓
轉成瀏覽器可以編輯的文件結構
↓
Web Editor
↓
使用者編輯
↓
重新處理文件結構
↓
產生 DOCX
一開始以為比較麻煩的地方會是 Editor，實際做下去後反而發現：
真正麻煩的是 DOCX 本身。
DOCX 並不是單純把文字存進一個檔案而已，裡面其實是一整組 Open XML。
除了文字，還有：
所以單純把 DOCX 內容顯示到網頁上還好。
比較麻煩的是：
使用者改完之後，怎麼把它變回 DOCX，同時又不要把原本的格式弄壞。
目前花最多時間的其實是文件的 Round Trip：
原始 DOCX
↓
瀏覽器
↓
修改內容
↓
重新產生 DOCX
如果只是把文字抽出來，再建立一份新的 Word，其實相對簡單。
但實際企業文件通常沒辦法這樣處理。
因為原始文件裡可能有：
只要轉換過程漏掉一些東西，就很容易發生「文字是對的，但整份 Word 排版壞掉」的情況。
所以目前處理方式並不是單純：
DOCX → HTML → 建立新的 DOCX
而是盡可能保留原本文件裡的資訊，再處理使用者實際修改的內容。
這部分也是目前最花時間的地方。
現在已經有一版可以直接操作。
這次沒有牽涉 AI Model 或公司內部資料，所以想說乾脆把 Demo 開放出來給大家測。
我自己測試的文件畢竟有限，而 Word 這種東西最不缺的就是各種奇怪格式 XD
如果手上剛好有：
都滿歡迎拿來玩看看。
👉 https://profile.shenyuans.com/onlinedocx
測試帳號：
帳號：test123
密碼：test123
目前是公開測試環境，請不要上傳包含個資、機密資訊或正式業務資料的文件。
如果測到跑版、下載後格式不對、某些 DOCX 打不開，或直接把它玩壞了，都歡迎留言跟我說。
如果有一些企業系統實際上很常用，但目前沒有支援的功能，也可以提出來。
目前沒有打算把它做成完整的 Microsoft Word 替代品，那個坑應該太大了 XD
現在比較想處理的是一個很明確的使用情境：
既有 Web 系統需要基本的 Word 編輯能力。
例如公文、採購、文件管理、表單或其他企業內部系統，本來就有 DOCX 範本，只是希望使用者可以直接在系統裡修改內容，不需要一直下載、修改、重新上傳。
接下來應該會繼續補不同 DOCX 的相容性，再看看大家實際測試後最常遇到哪些問題。
如果大家以前也做過 Web 線上編輯 Word，滿好奇你們最後是怎麼處理的。
歡迎交流，也歡迎幫我找 Bug :)
前陣子做了一個「線上 Word 編輯器」，原本是希望能解決企業系統中，需要頻繁下載 Word、編輯後再重新上傳的操作問題。
不過考量到現實上的時間與維護成本，目前沒有辦法由我一個人持續單獨維護，所以決定直接把專案開源，提供給有需要的人免費使用、研究或自行延伸。
GitHub：
https://github.com/WUGINTING/FreeOnlineWordEditor?tab=readme-ov-file
線上 Demo：
https://wuginting.github.io/FreeOnlineWordEditor/
如果剛好有類似需求，也歡迎拿去玩玩看。
有興趣一起改善或新增功能的話，也歡迎 PR。
iThome鐵人賽
看影片追技術