前言
需要實現word文檔的編輯和保存功能，之前寫了一篇選方案的。
現在就按照onlyoffice開始實現?！緵]有使用到多人協(xié)同】
正文
1.后端部署（忽略），后端給我了一個地址之后，我運行了一個demo(代碼)
報錯：文檔安全令牌未正確形成
可能的解決方案：
- dzzoffice中安裝onlyoffice后打開顯示文檔安全令牌未正確形成的臨時解決辦法
-
請問一下這個怎么解決:文檔安全令牌未正確形成onlyoffice
總之，后端后面又給了我一個地址。demo可以運行成功。
引入后臺配置好的office服務器
main.js中
<script type="text/javascript" src="xxxxxx/web-apps/apps/api/documents/api.js"></script>
- 其實第一步測試服務器的時候，就封裝了一下組件和配置項之類的。在這里進一步根據需求調整配置項。
參考官網修改：- 編輯器定制：注意：有些要企業(yè)版才可以修改，比如logo。這個是比較詳細的配置項參考
- 高級參數：包括文檔權限和編輯器定制等。
主要用到的就是文檔權限和編輯器配置項的定制了。
-
修改完之后的保存，修改后的文檔是在onlyOffice的服務器上的，需要使用后端回調url。
邏輯：
1)對于一個新的word文檔A，前端上傳A到后臺服務器，同時頁面渲染打開，用戶可以進行編輯。
2)編輯完成后，點擊保存，修改后的A通過回調url保存到新的服務器位置。
ps:這部分功能主要是在后端實現的（文檔的替換和路徑修改），前端主要是填一下回調的url（拼接上文檔id(或者其他區(qū)分的屬性）），完成后再刷新一下，這樣就好了。
官網回調處理程序，主要后端看 -
后面有加了一個下載的功能
雖然在前面的配置中，存在一個 download的權限配置項。
但是在測試的時候發(fā)現，它的不足（？
1.在菜單欄中沒有明顯的Icon（或者是我沒找到）
2.另存為可以有很多格式，但是它的保存地址實際為原來提供的url?(這樣的話又會保存到服務器上了，而不是下載到用戶本地）ps.并不知道它是否有下載回服務器。
最后選擇的方案是：前端加個按鈕，直接獲取后臺的對應url，進行下載。
使用的是a鏈接下載。比較簡單。
參考：前端vue中實現文件下載的幾種方法
代碼
<div @click.prevent="downloadFile">
<img
src="./img/download.png"
alt=""
style="cursor: pointer;"
/>
<a :href="fileUrl"></a>
</div>
downloadFile() {
this.getWordMes();//獲取this.fileTitle && this.fileUrl的接口
if (!(this.fileTitle && this.fileUrl)) {
return;
} else {
// 創(chuàng)建隱藏的<a>元素
console.log(this.fileTitle);
const link = document.createElement("a");
link.href = this.fileUrl; // 使用 this.fileUrl 獲取文件的完整路徑
link.download = this.fileTitle; // 指定下載的文件名
link.target = "_blank";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
},
存在的問題是，文件名設置了但會變亂碼。不知道為啥。
一些嘗試
菜單欄的功能比較多，但是實際需求不需要那么多，需要去掉一些文章來源：http://www.zghlxwxcb.cn/news/detail-492682.html
- 看了配置，但是好像是只有企業(yè)版才可以自定義。所以修改配置的方法pass。
- 本來想使用deep直接修改的，但是無法獲取到需要一定時間后生成的iframe里的內容。所以也pass。（感覺這個應該是一個可行的方案，只是目前我不知道怎么實現）
修改iframe內部元素的樣式，但是里面使用的應該不是動態(tài)生產的iframe吧。 - 最后就是相當勉強的使用css+div遮擋了一下。
參考
vue基于onlyoffice實現DOC、DOCX、XLSX、PPT、PDF文檔編輯預覽 ：包括了選方案，Vue2+3還有后端部署，主要偏后端
Vue 預覽word,excel,ppt等office文檔-內網訪問（基于onlyoffice，后端返回文件流） 有解釋常用的配置，偏前端的功能。比較簡單。因為也沒有提到返回文件流后的處理或者操作。
Onlyoffice 二次開發(fā)指南：有講協(xié)作、加密之類的。也有講一些原理。
java+vue+onlyoffice的簡單集成 大差不差，包括前后端的代碼。
onlyoffice使用記錄偏后端，提取了打印功能。樣式是自定義的，但是沒說咋實現的。不知道是不是企業(yè)版。文章來源地址http://www.zghlxwxcb.cn/news/detail-492682.html
擴展&可優(yōu)化
- 需求是用戶編輯自己的文檔，所以沒有用到協(xié)作。實際社區(qū)版的協(xié)作，最多是20人（不知道是一次只能同時20人在線編輯還是什么）。
- 插件相關
- 【插件市場】如何在 ONLYOFFICE 文檔安裝插件 可以后續(xù)嘗試的加插件，功能還是很多的。
- Onlyoffice 插件開發(fā)指南：提供了一個很簡單的插件開發(fā)寫法，沒試。
- 樣式相關：onlyoffice修改左上角的logo：省流1.企業(yè)版2.直接改源碼重新打包替換
到了這里，關于【vue2+onlyoffice】word在線編輯&保存的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
