天天看點

記一次基于雲服務開發文檔線上編輯系統的開發記錄,支援版本記錄、可增加批注。

  從工作實習的時候我就參與了一個項目叫做“雲文檔管理系統”,說白了就是檔案的上傳、下載下傳、預覽、分享、資源回收筒等等一些操作。上傳下載下傳以及分享都很Easy,複雜的就在文檔預覽上,圖檔、視訊、音頻都有現成的插件可以使用,Office文檔的線上預覽相對來說還是比較複雜的,當時也是看好多把Office文檔轉換成html進行預覽的,也有轉換成Pdf預覽的,即使都實作預覽效果又怎樣。客戶提出一個需求叫做“文檔版本修改曆史留存、可增加批注”,當時這個需求簡直讓人頭大,我不知道如何下手。我記得我當時的主管對這個需求也是很無助啊,過了幾天他就告訴我他找到一個插件,不過隻能在IE浏覽器上使用Active X控件才能實作,而且調試起來超級麻煩。我記得當時這個功能還是廢棄了。

  時隔五年,我偶然間發現了一個文檔線上預覽的服務,大家可以參考我的另一篇部落格《如何實作文檔線上預覽》,這裡我就不再過多贅述了。即使到目前我也隻是把文檔線上預覽功能找到了解決方案,可是文檔線上編輯一直是我的一個心結。2021年開年到現在,每天工作都很繁忙,午休的時間累積在一起我寫了一個基于雲服務的文檔線上編輯系統(基礎功能基本已經實作),如果有需要的小夥伴可以參照我下面介紹的步驟來體驗一下:

我們進入雲服務官網,申請加入開發者,跟着導航一步一步走就OK了,等待稽核通過,你會得到appId和appKey,這倆參數在調用接口時候會用到。

記一次基于雲服務開發文檔線上編輯系統的開發記錄,支援版本記錄、可增加批注。

  驗簽方法,就是對你調用接口的參數進行簽名,被調用方拿到你的參數要進行校驗,校驗通過才算是有效調用。

記住,這個sign很重要,因為我剛開始把appKey當做sign傳入參數進行調用,總是報錯,後來才知道是我簽名傳了個寂寞。

記一次基于雲服務開發文檔線上編輯系統的開發記錄,支援版本記錄、可增加批注。

  準備工作已經準備完畢了,下面就要開始接口調用了,API提供了建立文檔、本地文檔上傳、檔案删除、檔案版本删除等等,我這裡不一一調用了,隻做了幾個我項目中用到的來羅列一下,我界面做的比較醜,湊合看。。

 本地文檔上傳,文檔上傳成功之後傳回的結果如下,包含第一個檔案版本Id和檔案的Id,這樣我的檔案就上傳到雲服務了,我們拿着檔案版本ID,就可以進行線上編輯了。

記一次基于雲服務開發文檔線上編輯系統的開發記錄,支援版本記錄、可增加批注。

我們拿過來剛才的檔案版本ID,進行線上編輯功能測試,我這裡直接做了個跳轉,跳轉到的頁面就是線上編輯頁面,如果你在Postman調用的話,會得到一大串HTML代碼,就算你粘貼過來,也是缺少css和js的,因為打開的方式就不對。我們來看一下效果:

記一次基于雲服務開發文檔線上編輯系統的開發記錄,支援版本記錄、可增加批注。

 線上編輯效果:整體效果非常好,而且可以進行批注

記一次基于雲服務開發文檔線上編輯系統的開發記錄,支援版本記錄、可增加批注。

  線上編輯是可以了,但是還沒完。因為你用之前的版本ID再次打開會發現,什麼也沒更改,這是為什麼呢?因為我們修改的内容已經作為新版本進行儲存了,因為我是在本機進行測試,沒有釋出到伺服器,是以我也不知道儲存後的文檔版本ID是多少,我根據檔案版本名字發現了規律,那就是從0開始依次累加,那我直接在檔案ID後加下劃線 _1進行測試,果然打開了我上次修改并儲存的那個文檔。于是我又進入API文檔發現,這個線上編輯是實時本地儲存的,一旦你離開線上編輯,它就會回調給你的接口,這裡我們先配置一下接口:

記一次基于雲服務開發文檔線上編輯系統的開發記錄,支援版本記錄、可增加批注。

這裡乍一看是個外網位址,其實是我映射内網的位址,我搭建了内網映射服務,這樣我就可以在外網調試的時候,映射到我本機電腦進行調試了,于是我編輯完文檔,并傳回,這是回調位址就起了作用了,值得注意的是,路由位址要按照接口給出的3rd/edit/callBack進行配置,否則你的接口接收不到任何東西。

記一次基于雲服務開發文檔線上編輯系統的開發記錄,支援版本記錄、可增加批注。

 好了,我們接收到了雲服務給我們回調的資料,這樣我們就可以根據這些資料進行資料操作了。

能力有限,隻會C#這一程式設計語言,僅供參考。

有興趣的同志可以一起交流。

Github已開源此Demo