uniapp接入金山文檔在線預覽服務

最近公司項目中需要在uniapp接入金山文檔預覽服務，這里記錄一下接入方法。

需求是在移動端H5里可以進行團隊協作，支持預覽編輯office文件。

下面介紹一下接入過程：

準備工作

后端接入

前端接入

演示效果

參考資料

準備工作

金山文檔在線預覽編輯服務，是以 H5 網頁的形式提供，支持全平臺接入。

在線服務完整的使用，需要對接方前端和服務端的參與。

前端：根據文件格式（Word、Excel、PPT 等）生成訪問金山文檔的 url，通過 js-sdk 接入，調用相關 API 來實現相關需求。

服務端：根據金山文檔在線預覽編輯服務提供的回調 API 實現接口，將數據存儲到對接方的公網服務器中。

可以通過 4 個步驟，快速接入金山文檔在線預覽編輯服務。

申請服務商

接入方式

文件預覽

文件編輯

文件新建

服務端接入

前端接入

后端接入

這里后端有專人負責，所以不再贅述，有興趣的可以參考官方文檔的服務端Demo

前端接入

js-sdk下載

使用之前，請先下載最新版本的 js-sdk 代碼。

引用js-sdk

將js-sdk拷貝至uni-app項目內

uniapp項目中新建預覽頁例如preview.vue，輸入如下代碼。

如上所示，調用wps的內置config函數并傳入參數

setToken 主動設置 toke 來進行初始化及鑒權設置

另外需要在App.vue中加入如下全局樣式，防止高度沒撐起來達不到預覽效果

uni-page-body { height: 100%; } #viewFile { height: 100%; } #viewFile .web-office-iframe { height: 100% !important; }

說明：

本示例是在點擊文件時獲取預覽地址將地址存入localStorage(當然你也可以使用query傳參的方式)之后在預覽頁取出后調用sdk進行初始化從而實現預覽功能，僅供參考。

演示效果

參考資料

接入指南

js-sdk

服務端 demo 獲取

js-sdk引用方式

wps-view-vue

視頻演示

API/SDK web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。